Add files via upload

src/componants/shared/mytools/whatdoidolist/WhatDoIDoList.jsx

@@ -0,0 +1,22 @@
+import s from "./WhatDoIDoList.module.scss";
+
+const WhatDoIDoList = ({ data, title, icon, type }) => {
+  const checkedClass = type === "checked" ? s.checked : "";
+
+  return (
+    <div className={s.list}>
+      <h2 className={s.title}>
+        {title} <span className={s.icon}>{icon}</span>
+      </h2>
+
+      <ul className={checkedClass} role="menu">
+        {data?.map((text, i) => (
+          <li role="menuitem" key={i}>
+            {text}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+export default WhatDoIDoList;

src/componants/shared/mytools/whatdoidolist/WhatDoIDoList.module.scss

@@ -0,0 +1,68 @@
+@import "src/Styles/mixins";
+
+.title {
+  color: #cdcdcd;
+  font-weight: 500;
+  font-size: 1.3rem;
+  font-family: "Inter", sans-serif;
+  margin-bottom: 8px;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  &::first-letter {
+    text-transform: capitalize;
+  }
+}
+
+@include medium {
+  .title {
+    font-size: 1.1rem;
+  }
+}
+
+.title>span {
+  user-select: none;
+}
+
+@include medium {
+  .title>span {
+    font-size: .95rem;
+  }
+}
+
+.list ul {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.list ul>li {
+  font-family: "Inter", sans-serif;
+  margin-left: 20px;
+  color: var(--white);
+  filter: drop-shadow(0 0 .5px var(--white));
+}
+
+@include medium {
+  .list ul>li {
+    font-size: .9rem;
+  }
+}
+
+@include small {
+  .list ul>li {
+    font-size: .8rem;
+  }
+}
+
+.list .checked>li {
+  text-decoration: line-through;
+  color: var(--medium-light-gray);
+  filter: drop-shadow(0 0 .5px var(--medium-light-gray));
+}
+
+:where(.title, .list li)::selection {
+  background-color: var(--white) !important;
+}