🔀 merge: Merge branch 'common' of https://github.com/KieIO/grocery-vercel-commerce into m2-quangnhan

:%s

src/components/icons/IconArrowRight.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconArrowRight = () => {
+    return (
+        <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.92 6.62019C11.8724 6.49743 11.801 6.38529 11.71 6.29019L6.71 1.29019C6.61676 1.19695 6.50607 1.12299 6.38425 1.07253C6.26243 1.02207 6.13186 0.996094 6 0.996094C5.7337 0.996094 5.4783 1.10188 5.29 1.29019C5.19676 1.38342 5.1228 1.49411 5.07234 1.61594C5.02188 1.73776 4.99591 1.86833 4.99591 2.00019C4.99591 2.26649 5.1017 2.52188 5.29 2.71019L8.59 6.00019H1C0.734784 6.00019 0.48043 6.10554 0.292893 6.29308C0.105357 6.48062 0 6.73497 0 7.00019C0 7.2654 0.105357 7.51976 0.292893 7.70729C0.48043 7.89483 0.734784 8.00019 1 8.00019H8.59L5.29 11.2902C5.19627 11.3831 5.12188 11.4937 5.07111 11.6156C5.02034 11.7375 4.9942 11.8682 4.9942 12.0002C4.9942 12.1322 5.02034 12.2629 5.07111 12.3848C5.12188 12.5066 5.19627 12.6172 5.29 12.7102C5.38296 12.8039 5.49356 12.8783 5.61542 12.9291C5.73728 12.9798 5.86799 13.006 6 13.006C6.13201 13.006 6.26272 12.9798 6.38458 12.9291C6.50644 12.8783 6.61704 12.8039 6.71 12.7102L11.71 7.71019C11.801 7.61508 11.8724 7.50294 11.92 7.38019C12.02 7.13672 12.02 6.86365 11.92 6.62019Z" fill="white" />
+        </svg>
+    )
+}
+
+export default IconArrowRight

src/components/icons/IconArrowUp.tsx

@@ -0,0 +1,10 @@
+const ArrowUp = () => {
+
+    return (
+        <svg style={{margin:"auto", fontWeight: "bold"}} xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#141414" className="bi bi-chevron-up" viewBox="0 0 16 16">
+            <path stroke="#141414" stroke-width="1" fillRule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
+        </svg>
+    )
+  }
+  
+  export default ArrowUp

src/components/icons/IconFacebook.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconFacebook = () => {
+    return (
+        <svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9.12035 3.32003H11.0004V0.14003C10.0901 0.045377 9.17551 -0.00135428 8.26035 2.98641e-05C5.54035 2.98641e-05 3.68035 1.66003 3.68035 4.70003V7.32003H0.610352V10.88H3.68035V20H7.36035V10.88H10.4204L10.8804 7.32003H7.36035V5.05003C7.36035 4.00003 7.64035 3.32003 9.12035 3.32003Z" fill="#141414" />
+        </svg>
+    )
+}
+
+export default IconFacebook

src/components/icons/IconHeart.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconHeart = () => {
+  return (
+    <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M19.1598 2.61006C18.0981 1.54806 16.6905 0.902384 15.193 0.790439C13.6955 0.678494 12.2076 1.10772 10.9998 2.00006C9.72744 1.0537 8.14378 0.624569 6.56771 0.799095C4.99164 0.973621 3.54023 1.73884 2.50576 2.94064C1.47129 4.14245 0.93061 5.69158 0.992588 7.27607C1.05457 8.86057 1.71461 10.3627 2.83979 11.4801L10.2898 18.9301C10.3828 19.0238 10.4934 19.0982 10.6152 19.1489C10.7371 19.1997 10.8678 19.2259 10.9998 19.2259C11.1318 19.2259 11.2625 19.1997 11.3844 19.1489C11.5062 19.0982 11.6168 19.0238 11.7098 18.9301L19.1598 11.4801C19.7424 10.8978 20.2047 10.2064 20.52 9.44542C20.8354 8.68445 20.9977 7.86879 20.9977 7.04506C20.9977 6.22133 20.8354 5.40567 20.52 4.64469C20.2047 3.88371 19.7424 3.19233 19.1598 2.61006ZM17.7498 10.0701L10.9998 16.8101L4.24979 10.0701C3.65496 9.47276 3.24976 8.71311 3.08502 7.8864C2.92027 7.05969 3.00332 6.20274 3.32374 5.42305C3.64416 4.64336 4.18768 3.97565 4.88613 3.50368C5.58458 3.03171 6.40685 2.7765 7.24979 2.77006C8.3759 2.77282 9.45488 3.22239 10.2498 4.02006C10.3428 4.11379 10.4534 4.18818 10.5752 4.23895C10.6971 4.28972 10.8278 4.31586 10.9598 4.31586C11.0918 4.31586 11.2225 4.28972 11.3444 4.23895C11.4662 4.18818 11.5768 4.11379 11.6698 4.02006C12.4881 3.31094 13.5453 2.9392 14.6273 2.98008C15.7094 3.02096 16.7355 3.47141 17.498 4.24025C18.2605 5.00909 18.7024 6.0389 18.7343 7.12125C18.7662 8.2036 18.3857 9.25765 17.6698 10.0701H17.7498Z" fill="#141414" />
+    </svg>
+  )
+}
+
+export default IconHeart

src/components/icons/IconHistory.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconHistory = () => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 0C7.43639 0.00731219 4.97349 0.998914 3.12 2.77V1C3.12 0.734784 3.01464 0.48043 2.82711 0.292893C2.63957 0.105357 2.38522 0 2.12 0C1.85478 0 1.60043 0.105357 1.41289 0.292893C1.22536 0.48043 1.12 0.734784 1.12 1V5.5C1.12 5.76522 1.22536 6.01957 1.41289 6.20711C1.60043 6.39464 1.85478 6.5 2.12 6.5H6.62C6.88522 6.5 7.13957 6.39464 7.32711 6.20711C7.51464 6.01957 7.62 5.76522 7.62 5.5C7.62 5.23478 7.51464 4.98043 7.32711 4.79289C7.13957 4.60536 6.88522 4.5 6.62 4.5H4.22C5.50578 3.15636 7.21951 2.30265 9.06653 2.08567C10.9136 1.86868 12.7785 2.30198 14.3407 3.31104C15.9028 4.32011 17.0646 5.84191 17.6263 7.61479C18.188 9.38767 18.1145 11.3009 17.4184 13.0254C16.7223 14.7499 15.4472 16.1781 13.8122 17.0643C12.1772 17.9505 10.2845 18.2394 8.45956 17.8813C6.63463 17.5232 4.99147 16.5405 3.81259 15.1022C2.63372 13.6638 1.99279 11.8597 2 10C2 9.73478 1.89464 9.48043 1.70711 9.29289C1.51957 9.10536 1.26522 9 1 9C0.734784 9 0.48043 9.10536 0.292893 9.29289C0.105357 9.48043 0 9.73478 0 10C0 11.9778 0.58649 13.9112 1.6853 15.5557C2.78412 17.2002 4.3459 18.4819 6.17317 19.2388C8.00043 19.9957 10.0111 20.1937 11.9509 19.8079C13.8907 19.422 15.6725 18.4696 17.0711 17.0711C18.4696 15.6725 19.422 13.8907 19.8079 11.9509C20.1937 10.0111 19.9957 8.00043 19.2388 6.17317C18.4819 4.3459 17.2002 2.78412 15.5557 1.6853C13.9112 0.58649 11.9778 0 10 0ZM10 6C9.73478 6 9.48043 6.10536 9.29289 6.29289C9.10536 6.48043 9 6.73478 9 7V10C9 10.2652 9.10536 10.5196 9.29289 10.7071C9.48043 10.8946 9.73478 11 10 11H12C12.2652 11 12.5196 10.8946 12.7071 10.7071C12.8946 10.5196 13 10.2652 13 10C13 9.73478 12.8946 9.48043 12.7071 9.29289C12.5196 9.10536 12.2652 9 12 9H11V7C11 6.73478 10.8946 6.48043 10.7071 6.29289C10.5196 6.10536 10.2652 6 10 6Z" fill="#5B9A74" />
+        </svg>
+    )
+}
+
+export default IconHistory

src/components/icons/IconHome.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconHome = () => {
+    return (
+        <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M17.0001 7.00001L11.0001 1.74001C10.4501 1.24805 9.73803 0.976074 9.00009 0.976074C8.26216 0.976074 7.55012 1.24805 7.00009 1.74001L1.00009 7.00001C0.682463 7.28408 0.428995 7.63256 0.256567 8.02225C0.0841385 8.41194 -0.00329256 8.83389 9.47941e-05 9.26001V18C9.47941e-05 18.7957 0.316165 19.5587 0.878775 20.1213C1.44138 20.6839 2.20445 21 3.00009 21H15.0001C15.7957 21 16.5588 20.6839 17.1214 20.1213C17.684 19.5587 18.0001 18.7957 18.0001 18V9.25001C18.0021 8.82557 17.9139 8.40555 17.7416 8.01769C17.5692 7.62983 17.3165 7.28296 17.0001 7.00001ZM11.0001 19H7.00009V14C7.00009 13.7348 7.10545 13.4804 7.29299 13.2929C7.48052 13.1054 7.73488 13 8.00009 13H10.0001C10.2653 13 10.5197 13.1054 10.7072 13.2929C10.8947 13.4804 11.0001 13.7348 11.0001 14V19ZM16.0001 18C16.0001 18.2652 15.8947 18.5196 15.7072 18.7071C15.5197 18.8946 15.2653 19 15.0001 19H13.0001V14C13.0001 13.2044 12.684 12.4413 12.1214 11.8787C11.5588 11.3161 10.7957 11 10.0001 11H8.00009C7.20444 11 6.44138 11.3161 5.87877 11.8787C5.31616 12.4413 5.00009 13.2044 5.00009 14V19H3.00009C2.73488 19 2.48052 18.8946 2.29299 18.7071C2.10545 18.5196 2.00009 18.2652 2.00009 18V9.25001C2.00027 9.10802 2.03069 8.9677 2.08931 8.83839C2.14794 8.70907 2.23343 8.59372 2.3401 8.50001L8.34009 3.25001C8.52258 3.08969 8.75719 3.00127 9.00009 3.00127C9.243 3.00127 9.47761 3.08969 9.66009 3.25001L15.6601 8.50001C15.7668 8.59372 15.8523 8.70907 15.9109 8.83839C15.9695 8.9677 15.9999 9.10802 16.0001 9.25001V18Z" fill="#141414" />
+        </svg>
+    )
+}
+
+export default IconHome

src/components/icons/IconInfo.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconInfo = () => {
+    return (
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6.99968 6.3335C6.82287 6.3335 6.6533 6.40373 6.52827 6.52876C6.40325 6.65378 6.33301 6.82335 6.33301 7.00016V9.66683C6.33301 9.84364 6.40325 10.0132 6.52827 10.1382C6.6533 10.2633 6.82287 10.3335 6.99968 10.3335C7.17649 10.3335 7.34606 10.2633 7.47108 10.1382C7.59611 10.0132 7.66634 9.84364 7.66634 9.66683V7.00016C7.66634 6.82335 7.59611 6.65378 7.47108 6.52876C7.34606 6.40373 7.17649 6.3335 6.99968 6.3335ZM7.25301 3.72016C7.0907 3.65348 6.90865 3.65348 6.74634 3.72016C6.66451 3.75189 6.58975 3.79947 6.52634 3.86016C6.46746 3.92496 6.4201 3.99937 6.38634 4.08016C6.34902 4.15928 6.33076 4.24605 6.33301 4.3335C6.3325 4.42123 6.34932 4.50821 6.3825 4.58943C6.41567 4.67066 6.46456 4.74454 6.52634 4.80683C6.59114 4.86572 6.66555 4.91307 6.74634 4.94683C6.84734 4.98832 6.95699 5.00437 7.06564 4.99357C7.1743 4.98277 7.27863 4.94544 7.36949 4.88488C7.46034 4.82431 7.53492 4.74235 7.58668 4.64621C7.63845 4.55007 7.6658 4.44269 7.66634 4.3335C7.66389 4.15698 7.59483 3.98792 7.47301 3.86016C7.40961 3.79947 7.33485 3.75189 7.25301 3.72016ZM6.99968 0.333496C5.68114 0.333496 4.3922 0.724489 3.29588 1.45703C2.19955 2.18957 1.34506 3.23077 0.840481 4.44894C0.335896 5.66711 0.203874 7.00756 0.461109 8.30077C0.718344 9.59397 1.35328 10.7819 2.28563 11.7142C3.21798 12.6466 4.40587 13.2815 5.69908 13.5387C6.99228 13.796 8.33273 13.6639 9.5509 13.1594C10.7691 12.6548 11.8103 11.8003 12.5428 10.704C13.2753 9.60764 13.6663 8.31871 13.6663 7.00016C13.6663 6.12468 13.4939 5.25778 13.1589 4.44894C12.8238 3.6401 12.3328 2.90517 11.7137 2.28612C11.0947 1.66706 10.3597 1.176 9.5509 0.840966C8.74206 0.505935 7.87516 0.333496 6.99968 0.333496ZM6.99968 12.3335C5.94484 12.3335 4.9137 12.0207 4.03664 11.4347C3.15957 10.8486 2.47599 10.0157 2.07232 9.04114C1.66865 8.0666 1.56303 6.99425 1.76882 5.95968C1.97461 4.92512 2.48256 3.97481 3.22844 3.22893C3.97432 2.48305 4.92463 1.9751 5.9592 1.76931C6.99376 1.56352 8.06612 1.66914 9.04066 2.07281C10.0152 2.47647 10.8481 3.16006 11.4342 4.03712C12.0202 4.91418 12.333 5.94533 12.333 7.00016C12.333 8.41465 11.7711 9.77121 10.7709 10.7714C9.77072 11.7716 8.41417 12.3335 6.99968 12.3335Z" fill="#3468B7" />
+        </svg>
+    )
+}
+
+export default IconInfo

src/components/icons/IconInstagram.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconInstagram = () => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7.52C9.5095 7.52 9.03002 7.66545 8.62219 7.93795C8.21435 8.21046 7.89648 8.59778 7.70878 9.05095C7.52107 9.50411 7.47196 10.0028 7.56765 10.4838C7.66334 10.9649 7.89954 11.4068 8.24638 11.7536C8.59321 12.1005 9.0351 12.3367 9.51618 12.4323C9.99725 12.528 10.4959 12.4789 10.9491 12.2912C11.4022 12.1035 11.7895 11.7856 12.062 11.3778C12.3346 10.97 12.48 10.4905 12.48 10C12.48 9.67432 12.4159 9.35183 12.2912 9.05095C12.1666 8.75006 11.9839 8.47666 11.7536 8.24638C11.5233 8.01609 11.2499 7.83341 10.9491 7.70878C10.6482 7.58415 10.3257 7.52 10 7.52ZM19.93 5.07C19.9247 4.29776 19.7825 3.53257 19.51 2.81C19.3093 2.28126 18.9987 1.80109 18.5988 1.40119C18.1989 1.00128 17.7187 0.690718 17.19 0.49C16.4674 0.217464 15.7022 0.0752609 14.93 0.0699999C13.64 -6.70552e-08 13.26 0 10 0C6.74 0 6.36 -6.70552e-08 5.07 0.0699999C4.29776 0.0752609 3.53257 0.217464 2.81 0.49C2.28126 0.690718 1.80109 1.00128 1.40119 1.40119C1.00128 1.80109 0.690718 2.28126 0.49 2.81C0.217464 3.53257 0.0752609 4.29776 0.0699999 5.07C-6.70552e-08 6.36 0 6.74 0 10C0 13.26 -6.70552e-08 13.64 0.0699999 14.93C0.0807639 15.705 0.222774 16.4725 0.49 17.2C0.689828 17.7263 1.00013 18.2037 1.4 18.6C1.79819 19.0023 2.27939 19.3129 2.81 19.51C3.53257 19.7825 4.29776 19.9247 5.07 19.93C6.36 20 6.74 20 10 20C13.26 20 13.64 20 14.93 19.93C15.7022 19.9247 16.4674 19.7825 17.19 19.51C17.7206 19.3129 18.2018 19.0023 18.6 18.6C18.9999 18.2037 19.3102 17.7263 19.51 17.2C19.7823 16.4739 19.9244 15.7055 19.93 14.93C20 13.64 20 13.26 20 10C20 6.74 20 6.36 19.93 5.07ZM17.39 13.07C17.3579 13.6871 17.2262 14.295 17 14.87C16.8059 15.3497 16.5173 15.7854 16.1514 16.1514C15.7854 16.5173 15.3497 16.8059 14.87 17C14.2895 17.2136 13.6783 17.3318 13.06 17.35C12.27 17.35 12.06 17.35 10 17.35C7.94 17.35 7.73 17.35 6.94 17.35C6.32173 17.3318 5.71049 17.2136 5.13 17C4.6341 16.8157 4.18628 16.5217 3.82 16.14C3.45767 15.7813 3.17784 15.3479 3 14.87C2.78556 14.2901 2.67061 13.6782 2.66 13.06C2.66 12.27 2.66 12.06 2.66 10C2.66 7.94 2.66 7.73 2.66 6.94C2.67061 6.32183 2.78556 5.70988 3 5.13C3.18428 4.6341 3.47827 4.18628 3.86 3.82C4.22033 3.45962 4.65326 3.18009 5.13 3C5.71049 2.78641 6.32173 2.66821 6.94 2.65C7.73 2.65 7.94 2.65 10 2.65C12.06 2.65 12.27 2.65 13.06 2.65C13.6783 2.66821 14.2895 2.78641 14.87 3C15.3659 3.18428 15.8137 3.47827 16.18 3.86C16.5423 4.21875 16.8222 4.65213 17 5.13C17.2136 5.71049 17.3318 6.32173 17.35 6.94C17.35 7.73 17.35 7.94 17.35 10C17.35 12.06 17.42 12.27 17.39 13.06V13.07ZM15.79 5.63C15.6709 5.30698 15.4832 5.01364 15.2398 4.77021C14.9964 4.52678 14.703 4.33906 14.38 4.22C13.9365 4.06626 13.4693 3.99179 13 4C12.22 4 12 4 10 4C8 4 7.78 4 7 4C6.52827 4.00461 6.06107 4.09263 5.62 4.26C5.30193 4.37366 5.01169 4.55371 4.76858 4.7882C4.52547 5.02269 4.33506 5.30624 4.21 5.62C4.06478 6.06537 3.99383 6.5316 4 7C4 7.78 4 8 4 10C4 12 4 12.22 4 13C4.00991 13.4712 4.09777 13.9375 4.26 14.38C4.37906 14.703 4.56678 14.9964 4.81021 15.2398C5.05364 15.4832 5.34698 15.6709 5.67 15.79C6.09667 15.9469 6.54565 16.0347 7 16.05C7.78 16.05 8 16.05 10 16.05C12 16.05 12.22 16.05 13 16.05C13.4717 16.0454 13.9389 15.9574 14.38 15.79C14.703 15.6709 14.9964 15.4832 15.2398 15.2398C15.4832 14.9964 15.6709 14.703 15.79 14.38C15.9574 13.9389 16.0454 13.4717 16.05 13C16.05 12.22 16.05 12 16.05 10C16.05 8 16.05 7.78 16.05 7C16.0503 6.5278 15.9621 6.05972 15.79 5.62V5.63ZM10 13.82C9.49882 13.82 9.00257 13.7211 8.53966 13.529C8.07676 13.3369 7.6563 13.0554 7.30238 12.7005C6.94846 12.3457 6.66803 11.9245 6.47714 11.4611C6.28626 10.9977 6.18868 10.5012 6.19 10C6.19 9.24405 6.4143 8.5051 6.83449 7.87669C7.25468 7.24828 7.85187 6.75866 8.55047 6.46983C9.24907 6.181 10.0177 6.10594 10.7589 6.25415C11.5002 6.40236 12.1808 6.76717 12.7147 7.30241C13.2485 7.83764 13.6116 8.51924 13.7578 9.2609C13.9041 10.0026 13.827 10.771 13.5363 11.4688C13.2457 12.1666 12.7545 12.7625 12.125 13.1811C11.4955 13.5996 10.7559 13.822 10 13.82ZM14 6.93C13.7789 6.9066 13.5744 6.80222 13.4257 6.63697C13.277 6.47172 13.1947 6.25729 13.1947 6.035C13.1947 5.81271 13.277 5.59828 13.4257 5.43303C13.5744 5.26778 13.7789 5.1634 14 5.14C14.2211 5.1634 14.4256 5.26778 14.5743 5.43303C14.723 5.59828 14.8053 5.81271 14.8053 6.035C14.8053 6.25729 14.723 6.47172 14.5743 6.63697C14.4256 6.80222 14.2211 6.9066 14 6.93Z" fill="#141414" />
+        </svg>
+    )
+}
+
+export default IconInstagram

src/components/icons/IconSearch.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconSearch = () => {
+    return (
+        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20.7104 19.2899L17.0004 15.6099C18.4405 13.8143 19.1379 11.5352 18.9492 9.2412C18.7605 6.94721 17.7001 4.81269 15.9859 3.27655C14.2718 1.74041 12.0342 0.919414 9.73332 0.982375C7.43243 1.04534 5.24311 1.98747 3.61553 3.61505C1.98795 5.24263 1.04582 7.43194 0.982863 9.73283C0.919903 12.0337 1.7409 14.2713 3.27704 15.9854C4.81318 17.6996 6.94769 18.76 9.24169 18.9487C11.5357 19.1374 13.8148 18.44 15.6104 16.9999L19.2904 20.6799C19.3834 20.7736 19.494 20.848 19.6158 20.8988C19.7377 20.9496 19.8684 20.9757 20.0004 20.9757C20.1324 20.9757 20.2631 20.9496 20.385 20.8988C20.5068 20.848 20.6174 20.7736 20.7104 20.6799C20.8906 20.4934 20.9914 20.2442 20.9914 19.9849C20.9914 19.7256 20.8906 19.4764 20.7104 19.2899ZM10.0004 16.9999C8.61592 16.9999 7.26255 16.5894 6.1114 15.8202C4.96026 15.051 4.06305 13.9578 3.53324 12.6787C3.00342 11.3996 2.8648 9.99214 3.1349 8.63427C3.40499 7.27641 4.07168 6.02912 5.05065 5.05016C6.02961 4.07119 7.27689 3.4045 8.63476 3.13441C9.99263 2.86431 11.4001 3.00293 12.6792 3.53275C13.9583 4.06256 15.0515 4.95977 15.8207 6.11091C16.5899 7.26206 17.0004 8.61544 17.0004 9.9999C17.0004 11.8564 16.2629 13.6369 14.9501 14.9497C13.6374 16.2624 11.8569 16.9999 10.0004 16.9999Z" fill="#3D3D3D" />
+        </svg>
+    )
+}
+
+export default IconSearch

src/components/icons/IconShopping.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconShopping = () => {
+    return (
+        <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18.167 6.16659H14.667V4.99992C14.667 3.76224 14.1753 2.57526 13.3002 1.70009C12.425 0.824917 11.238 0.333252 10.0003 0.333252C8.76265 0.333252 7.57566 0.824917 6.70049 1.70009C5.82532 2.57526 5.33366 3.76224 5.33366 4.99992V6.16659H1.83366C1.52424 6.16659 1.22749 6.2895 1.0087 6.50829C0.789909 6.72709 0.666992 7.02383 0.666992 7.33325V20.1666C0.666992 21.0948 1.03574 21.9851 1.69212 22.6415C2.3485 23.2978 3.23873 23.6666 4.16699 23.6666H15.8337C16.7619 23.6666 17.6522 23.2978 18.3085 22.6415C18.9649 21.9851 19.3337 21.0948 19.3337 20.1666V7.33325C19.3337 7.02383 19.2107 6.72709 18.9919 6.50829C18.7732 6.2895 18.4764 6.16659 18.167 6.16659ZM7.66699 4.99992C7.66699 4.38108 7.91282 3.78759 8.35041 3.35C8.78799 2.91242 9.38149 2.66659 10.0003 2.66659C10.6192 2.66659 11.2127 2.91242 11.6502 3.35C12.0878 3.78759 12.3337 4.38108 12.3337 4.99992V6.16659H7.66699V4.99992ZM17.0003 20.1666C17.0003 20.476 16.8774 20.7728 16.6586 20.9915C16.4398 21.2103 16.1431 21.3333 15.8337 21.3333H4.16699C3.85757 21.3333 3.56083 21.2103 3.34203 20.9915C3.12324 20.7728 3.00033 20.476 3.00033 20.1666V8.49992H5.33366V9.66659C5.33366 9.97601 5.45657 10.2728 5.67537 10.4915C5.89416 10.7103 6.19091 10.8333 6.50032 10.8333C6.80974 10.8333 7.10649 10.7103 7.32528 10.4915C7.54407 10.2728 7.66699 9.97601 7.66699 9.66659V8.49992H12.3337V9.66659C12.3337 9.97601 12.4566 10.2728 12.6754 10.4915C12.8942 10.7103 13.1909 10.8333 13.5003 10.8333C13.8097 10.8333 14.1065 10.7103 14.3253 10.4915C14.5441 10.2728 14.667 9.97601 14.667 9.66659V8.49992H17.0003V20.1666Z" fill="#141414" />
+        </svg>
+    )
+}
+
+export default IconShopping

src/components/icons/IconTwitter.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconTwitter = () => {
+    return (
+        <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20 2.80021C19.2483 3.1263 18.4534 3.34187 17.64 3.44021C18.4982 2.92753 19.1413 2.12099 19.45 1.17021C18.6436 1.65027 17.7608 1.98851 16.84 2.17021C16.2245 1.50278 15.405 1.05851 14.5098 0.907061C13.6147 0.755616 12.6945 0.905568 11.8938 1.3334C11.093 1.76123 10.4569 2.44274 10.0852 3.27105C9.71355 4.09935 9.62729 5.0276 9.84 5.91021C8.20943 5.82774 6.61444 5.40316 5.15865 4.66407C3.70287 3.92498 2.41885 2.8879 1.39 1.62021C1.02914 2.25038 0.839519 2.96403 0.84 3.69021C0.83872 4.36459 1.00422 5.02883 1.32176 5.62377C1.63929 6.21872 2.09902 6.72592 2.66 7.10021C2.00798 7.08247 1.36989 6.90751 0.8 6.59021V6.64021C0.804887 7.5851 1.13599 8.4993 1.73731 9.22818C2.33864 9.95705 3.17326 10.4559 4.1 10.6402C3.74326 10.7488 3.37287 10.806 3 10.8102C2.74189 10.8072 2.48442 10.7838 2.23 10.7402C2.49391 11.553 3.00462 12.2634 3.69107 12.7724C4.37753 13.2814 5.20558 13.5638 6.06 13.5802C4.6172 14.7155 2.83588 15.3351 1 15.3402C0.665735 15.3413 0.331736 15.3213 0 15.2802C1.87443 16.4905 4.05881 17.1329 6.29 17.1302C7.82969 17.1462 9.35714 16.8552 10.7831 16.2743C12.2091 15.6934 13.505 14.8341 14.5952 13.7467C15.6854 12.6593 16.548 11.3656 17.1326 9.94112C17.7172 8.51663 18.012 6.98994 18 5.45021C18 5.28021 18 5.10021 18 4.92021C18.7847 4.33502 19.4615 3.61763 20 2.80021Z" fill="#141414" />
+        </svg>
+    )
+}
+
+export default IconTwitter

src/components/icons/IconUser.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconUser = () => {
+    return (
+        <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13.7105 11.7101C14.6909 10.9388 15.4065 9.88105 15.7577 8.68407C16.109 7.48709 16.0784 6.21039 15.6703 5.03159C15.2621 3.85279 14.4967 2.83052 13.4806 2.10698C12.4644 1.38344 11.2479 0.994629 10.0005 0.994629C8.75303 0.994629 7.5366 1.38344 6.52041 2.10698C5.50423 2.83052 4.73883 3.85279 4.3307 5.03159C3.92257 6.21039 3.892 7.48709 4.24325 8.68407C4.59449 9.88105 5.31009 10.9388 6.29048 11.7101C4.61056 12.3832 3.14477 13.4995 2.04938 14.94C0.953983 16.3806 0.270048 18.0914 0.070485 19.8901C0.0560396 20.0214 0.0676015 20.1543 0.10451 20.2812C0.141419 20.408 0.202952 20.5264 0.285596 20.6294C0.452504 20.8376 0.695269 20.971 0.960485 21.0001C1.2257 21.0293 1.49164 20.9519 1.69981 20.785C1.90798 20.6181 2.04131 20.3753 2.07049 20.1101C2.29007 18.1553 3.22217 16.3499 4.6887 15.0389C6.15524 13.7279 8.05338 13.0032 10.0205 13.0032C11.9876 13.0032 13.8857 13.7279 15.3523 15.0389C16.8188 16.3499 17.7509 18.1553 17.9705 20.1101C17.9977 20.3558 18.1149 20.5828 18.2996 20.7471C18.4843 20.9115 18.7233 21.0016 18.9705 21.0001H19.0805C19.3426 20.97 19.5822 20.8374 19.747 20.6314C19.9119 20.4253 19.9886 20.1625 19.9605 19.9001C19.76 18.0963 19.0724 16.3811 17.9713 14.9383C16.8703 13.4955 15.3974 12.3796 13.7105 11.7101ZM10.0005 11.0001C9.20936 11.0001 8.436 10.7655 7.7782 10.326C7.12041 9.88648 6.60772 9.26176 6.30497 8.53086C6.00222 7.79995 5.923 6.99569 6.07734 6.21976C6.23168 5.44384 6.61265 4.73111 7.17206 4.1717C7.73147 3.61229 8.4442 3.23132 9.22012 3.07698C9.99605 2.92264 10.8003 3.00186 11.5312 3.30461C12.2621 3.60736 12.8868 4.12005 13.3264 4.77784C13.7659 5.43564 14.0005 6.209 14.0005 7.00012C14.0005 8.06099 13.5791 9.07841 12.8289 9.82855C12.0788 10.5787 11.0614 11.0001 10.0005 11.0001Z" fill="#141414" />
+        </svg>
+    )
+}
+
+export default IconUser

src/components/icons/IconVector.tsx

@@ -0,0 +1,19 @@
+
+const IconVector = ({ ...props }) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+            d="M14.8299 11.2899L10.5899 7.04995C10.497 6.95622 10.3864 6.88183 10.2645 6.83106C10.1427 6.78029 10.012 6.75415 9.87994 6.75415C9.74793 6.75415 9.61723 6.78029 9.49537 6.83106C9.37351 6.88183 9.26291 6.95622 9.16994 7.04995C8.98369 7.23731 8.87915 7.49076 8.87915 7.75495C8.87915 8.01913 8.98369 8.27259 9.16994 8.45995L12.7099 11.9999L9.16994 15.5399C8.98369 15.7273 8.87915 15.9808 8.87915 16.2449C8.87915 16.5091 8.98369 16.7626 9.16994 16.9499C9.26338 17.0426 9.3742 17.116 9.49604 17.1657C9.61787 17.2155 9.74834 17.2407 9.87994 17.2399C10.0115 17.2407 10.142 17.2155 10.2638 17.1657C10.3857 17.116 10.4965 17.0426 10.5899 16.9499L14.8299 12.7099C14.9237 12.617 14.9981 12.5064 15.0488 12.3845C15.0996 12.2627 15.1257 12.132 15.1257 11.9999C15.1257 11.8679 15.0996 11.7372 15.0488 11.6154C14.9981 11.4935 14.9237 11.3829 14.8299 11.2899Z"
+        />
+      </svg>
+    )
+  }
+  
+  export default IconVector

src/components/icons/IconYoutube.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconYoutube = () => {
+    return (
+        <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M23 5.70998C23.0495 4.27864 22.7365 2.858 22.09 1.57998C21.6514 1.05558 21.0427 0.701694 20.37 0.579984C17.5875 0.327509 14.7936 0.224028 12 0.269984C9.21667 0.221942 6.43274 0.322084 3.66003 0.569984C3.11185 0.669701 2.60454 0.926826 2.20003 1.30998C1.30003 2.13998 1.20003 3.55998 1.10003 4.75998C0.954939 6.91755 0.954939 9.08242 1.10003 11.24C1.12896 11.9154 1.22952 12.5858 1.40003 13.24C1.5206 13.745 1.76455 14.2123 2.11003 14.6C2.51729 15.0034 3.03641 15.2752 3.60003 15.38C5.75594 15.6461 7.92824 15.7564 10.1 15.71C13.6 15.76 16.67 15.71 20.3 15.43C20.8775 15.3316 21.4112 15.0595 21.83 14.65C22.11 14.3699 22.3191 14.0271 22.44 13.65C22.7977 12.5526 22.9733 11.4041 22.96 10.25C23 9.68998 23 6.30998 23 5.70998ZM9.74003 10.85V4.65998L15.66 7.76998C14 8.68998 11.81 9.72998 9.74003 10.85Z" fill="#141414" />
+        </svg>
+    )
+}
+
+export default IconYoutube

src/components/icons/index.ts

@@ -1 +1,11 @@
 export { default as IconBuy } from './IconBuy'
+export { default as ArrowUp } from './IconArrowUp'
+export { default as IconSearch } from './IconSearch'
+export { default as IconArrowRight } from './IconArrowRight'
+export { default as IconUser } from './IconUser'
+export { default as IconHistory } from './IconHistory'
+export { default as IconInfo } from './IconInfo'
+export { default as IconHome } from './IconHome'
+export { default as IconShopping } from './IconShopping'
+export { default as IconHeart } from './IconHeart'
+export { default as IconVector } from './IconVector'