Merge pull request #79 from shampsdev/refactor-icons

refactor: created Icons component

src/assets/icons/icons.tsx

@@ -0,0 +1,117 @@
+export const Icons = {
+  addPerson: ({ className }: { className?: string }) => {
+    return (
+      <div className={className}>
+        <svg
+          width="30"
+          height="23"
+          viewBox="0 0 30 23"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18.9827 3.14128C16.84 3.14128 15.1708 4.80666 15.1708 6.77874C15.1708 8.75082 16.84 10.4162 18.9827 10.4162C21.1255 10.4162 22.7946 8.75082 22.7946 6.77874C22.7946 4.80666 21.1255 3.14128 18.9827 3.14128ZM12.9944 6.77874C12.9944 3.53098 15.713 0.964844 18.9827 0.964844C22.2525 0.964844 24.971 3.53098 24.971 6.77874C24.971 10.0265 22.2525 12.5926 18.9827 12.5926C15.713 12.5926 12.9944 10.0265 12.9944 6.77874ZM5.50744 5.69053C6.10844 5.69053 6.59565 6.17774 6.59565 6.77874V9.23479H9.18252C9.78352 9.23479 10.2707 9.722 10.2707 10.323C10.2707 10.924 9.78352 11.4112 9.18252 11.4112H6.59565V13.8673C6.59565 14.4683 6.10844 14.9555 5.50744 14.9555C4.90643 14.9555 4.41922 14.4683 4.41922 13.8673V11.4112H1.83236C1.23135 11.4112 0.744141 10.924 0.744141 10.323C0.744141 9.722 1.23135 9.23479 1.83236 9.23479H4.41922V6.77874C4.41922 6.17774 4.90643 5.69053 5.50744 5.69053ZM18.9827 16.7276C12.6456 16.7276 11.0206 20.278 10.8774 21.6587C10.8155 22.2565 10.2806 22.6909 9.68279 22.6289C9.08499 22.5669 8.65063 22.0321 8.71262 21.4343C8.97779 18.8769 11.5996 14.5512 18.9827 14.5512C26.3659 14.5512 28.9877 18.8769 29.2528 21.4343C29.3148 22.0321 28.8805 22.5669 28.2827 22.6289C27.6849 22.6909 27.15 22.2565 27.088 21.6587C26.9448 20.278 25.3199 16.7276 18.9827 16.7276Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    );
+  },
+  cross: ({ className, fill }: { className?: string; fill?: string }) => {
+    return (
+      <div className={className}>
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={fill}
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.373537 0.385683C0.876291 -0.123779 1.69685 -0.129218 2.20632 0.373537L11.644 9.68693L21.0816 0.373537C21.5911 -0.129218 22.4117 -0.123779 22.9144 0.385683C23.4172 0.895146 23.4117 1.71571 22.9023 2.21846L13.4891 11.5077L22.9023 20.797C23.4117 21.2997 23.4172 22.1203 22.9144 22.6298C22.4117 23.1392 21.5911 23.1447 21.0816 22.6419L11.644 13.3285L2.20632 22.6419C1.69685 23.1447 0.876291 23.1392 0.373537 22.6298C-0.129218 22.1203 -0.123779 21.2997 0.385683 20.797L9.79889 11.5077L0.385683 2.21846C-0.123779 1.71571 -0.129218 0.895146 0.373537 0.385683Z"
+          />
+        </svg>
+      </div>
+    );
+  },
+  heart: ({ className, fill }: { className?: string; fill?: string }) => {
+    return (
+      <div className={className}>
+        <svg
+          width="30"
+          height="30"
+          viewBox="0 0 30 26"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={fill}
+        >
+          <path d="M15.0001 3.44269C13.7543 2.33287 12.0653 1.44379 10.211 1.11985C8.00405 0.734321 5.56364 1.15445 3.44334 2.93536C2.03038 4.12215 1.14648 5.98927 0.853582 8.0069C0.558216 10.0415 0.845842 12.3306 1.89817 14.4518C2.65949 15.9865 4.47193 17.917 6.3553 19.6941C8.28002 21.5103 10.4231 23.2968 11.9913 24.5594C13.7349 25.9632 16.2653 25.9632 18.0089 24.5594C19.5772 23.2968 21.7203 21.5103 23.645 19.6942C25.5283 17.9171 27.3408 15.9865 28.1021 14.4518C29.1544 12.3306 29.4421 10.0416 29.1467 8.00692C28.8538 5.98929 27.9699 4.12217 26.5569 2.93538C24.4366 1.15447 21.9962 0.734336 19.7893 1.11986C17.935 1.44379 16.246 2.33287 15.0001 3.44269Z" />
+        </svg>
+      </div>
+    );
+  },
+  info: () => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="w-6 h-6"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
+        />
+      </svg>
+    );
+  },
+
+  walk: ({ className }: { className?: string }) => {
+    return (
+      <div className={className}>
+        <svg
+          className="h-full w-full"
+          width="9"
+          height="15"
+          viewBox="0 0 9 15"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.62834 5.64661L3.57582 4.13772C3.79444 3.96707 4.06035 3.87945 4.33112 3.88883C4.66137 3.89762 4.98086 4.01594 5.24516 4.22735C5.50946 4.43876 5.70544 4.73276 5.80586 5.06846C5.91888 5.44633 6.02218 5.7017 6.11576 5.83458C6.3985 6.23695 6.76527 6.56349 7.18696 6.78828C7.60866 7.01307 8.07367 7.12993 8.54509 7.12958V8.42587C7.91758 8.4266 7.29773 8.27892 6.73014 7.99347C6.16255 7.70802 5.66136 7.29189 5.26263 6.77504L4.83911 9.33846L6.09145 10.4598L7.44223 14.4187L6.29987 14.862L5.06029 11.2298L3.00039 9.38578C2.83134 9.24017 2.70199 9.04889 2.62579 8.83184C2.54959 8.6148 2.52934 8.37993 2.56714 8.15171L2.87643 6.2818L2.46506 6.60069L1.17261 8.49847L0.189453 7.73624L1.61801 5.63883L1.62834 5.64661ZM5.20308 3.56476C4.88077 3.56476 4.57166 3.42819 4.34375 3.18508C4.11584 2.94198 3.9878 2.61226 3.9878 2.26846C3.9878 1.92467 4.11584 1.59495 4.34375 1.35184C4.57166 1.10874 4.88077 0.972168 5.20308 0.972168C5.52539 0.972168 5.8345 1.10874 6.06241 1.35184C6.29032 1.59495 6.41836 1.92467 6.41836 2.26846C6.41836 2.61226 6.29032 2.94198 6.06241 3.18508C5.8345 3.42819 5.52539 3.56476 5.20308 3.56476ZM3.39718 12.108L1.44423 14.5904L0.513325 13.7575L2.32166 11.4592L2.77496 10.0462L3.86324 11.0185L3.39718 12.108Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    );
+  },
+
+  xMark: ({ className }: { className?: string }) => {
+    return (
+      <div className={className}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-6 h-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6 18 18 6M6 6l12 12"
+          />
+        </svg>
+      </div>
+    );
+  }
+};

src/modules/game/card.tsx

@@ -5,9 +5,7 @@ import { useWebApp } from '@vkruglikov/react-telegram-web-app';
 import { useLobbyStore } from '@/shared/stores/lobby.store';
 import { getTime } from '@/shared/util/time.util';
 
-import HeartIcon from '@/assets/icons/heart.icon.tsx';
-import WalkIcon from '@/assets/icons/walk.icon';
-import CrossIcon from '@/assets/icons/cross.icon.tsx';
+import { Icons } from '@/assets/icons/icons';
 
 interface Props {
   data: Card;
@@ -95,7 +93,7 @@ export const CardComponent = ({ data, deltaY }: Props) => {
       {deltaY && (
         <div className="absolute w-full top-1/3 flex justify-center h-14 -translate-y-1/3 z-20">
           <motion.div style={{ opacity: iconLeftOpacity }} className="absolute">
-            <HeartIcon
+            <Icons.heart
               className="bg-white rounded-full p-3"
               fill="fill-primary"
             />
@@ -104,7 +102,7 @@ export const CardComponent = ({ data, deltaY }: Props) => {
             style={{ opacity: iconRightOpacity }}
             className="absolute"
           >
-            <CrossIcon
+            <Icons.cross
               className="bg-primary rounded-full p-4"
               fill="fill-primary-foreground"
             />
@@ -150,7 +148,7 @@ export const CardComponent = ({ data, deltaY }: Props) => {
               ~ {data.priceAvg} ₽
             </div>
             <div className="flex bg-background font-medium gap-1 justify-center items-center py-1 rounded-xl">
-              <WalkIcon className="h-[1.2rem] w-[0.9rem] text-primary" />{' '}
+              <Icons.walk className="h-[1.2rem] w-[0.9rem] text-primary" />{' '}
               {getTime(settings.location, data.location)}
             </div>
           </div>

src/modules/game/result.card.tsx

@@ -1,4 +1,4 @@
-import WalkIcon from '@/assets/icons/walk.icon';
+import { Icons } from '@/assets/icons/icons';
 import { useLobbyStore } from '@/shared/stores/lobby.store';
 import { Card } from '@/shared/types/card.interface';
 import { getTime } from '@/shared/util/time.util';
@@ -34,7 +34,7 @@ export const ResultCard = (data: { card: Card }) => {
             ~ {data.card.priceAvg} ₽
           </div>
           <div className="flex bg-background font-medium gap-1 justify-center items-center py-1 rounded-xl">
-            <WalkIcon className="h-[1.2rem] w-[0.9rem] text-primary" />
+            <Icons.walk className="h-[1.2rem] w-[0.9rem] text-primary" />
             <p className="line-clamp-1">
               {getTime(settings.location, data.card.location)}
             </p>

src/pages/lobby-preview.page.tsx

@@ -8,7 +8,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { swipesEvent } from '@/shared/events/app-events/swipes.event';
 
-import { AddPersonIcon } from '@/assets/icons/add-person.icon';
+import { Icons } from '@/assets/icons/icons';
 import { BOT_USERNAME } from '@/shared/constants';
 
 export const LobbyPreviewPage = () => {
@@ -139,7 +139,7 @@ export const LobbyPreviewPage = () => {
                 onClick={onShareClick}
                 className="h-[80px] w-[80px] border-[6px] border-secondary flex items-center justify-center rounded-full"
               >
-                <AddPersonIcon className="text-primary pr-1 pb-1" />
+                <Icons.addPerson className="text-primary pr-1 pb-1" />
               </div>
             </div>
           </div>