feat: 3 components ViewAllItem,IconWishList,Logo

pages/index.tsx

@@ -1,10 +1,13 @@
 
-import { ButtonCommon, Layout } from 'src/components/common'
+import { ButtonCommon, Layout, ViewAllItem, ItemWishList, Logo } from 'src/components/common'
 export default function Home() {
   return (
     <>
       <div>This is home page</div>
       <ButtonCommon />
+      <ViewAllItem />
+      <ItemWishList />
+      <Logo />
       <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
       <p>Go to <code>src/components</code> to make your awesome component!</p>
       <p>Go to <code>src/styles</code> to find global styles!</p>

src/components/common/ItemWishList/ItemWishList.module.scss

@@ -0,0 +1,10 @@
+@import '../../../styles/utilities';
+
+.heartToggle{
+    cursor: pointer;
+    width: 4.8rem;
+    height: 4.8rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/components/common/ItemWishList/ItemWishList.tsx

@@ -0,0 +1,19 @@
+import { Heart } from '@components/icons'
+import React, { useState } from 'react'
+import s from './ItemWishList.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const ItemWishList = ({}:Props) => {
+    const [isClick,setClick] = useState(false)
+    return(
+        <div className={s.heartToggle} onClick={() => setClick(!isClick)}>
+            <Heart color={isClick ? "#D1644D" : "#5B9A74"}/>
+        </div>
+    )
+}
+
+export default ItemWishList

src/components/common/Logo/Logo.module.scss

@@ -0,0 +1,20 @@
+@import '../../../styles/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
+
+
+.logo{
+    display: flex;
+    .eclipse{
+        width: 3.2rem;
+        height: 3.2rem;
+        background-color: theme("colors.primary");
+        border-radius: 50%;
+        margin-right: 1.2rem;
+    }
+    .conTent{
+        font-family: 'Poppins', sans-serif;
+        text-transform: uppercase;
+        line-height: 3.2rem;
+        letter-spacing: -0.02rem;
+    }
+}

src/components/common/Logo/Logo.tsx

@@ -0,0 +1,21 @@
+import s from './Logo.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const Logo = ({}: Props) => {
+    return(
+        <div className={s.logo}>
+            <div className={s.eclipse}>
+
+            </div>
+            <div className={s.conTent}>
+                ONLINE GROCERY
+            </div>
+        </div>
+    )
+}
+
+export default Logo

src/components/common/ViewAllItem/ViewAllItem.module.scss

@@ -0,0 +1,17 @@
+@import '../../../styles/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+
+.viewAll{
+    display: flex;
+    color: theme("colors.primary");
+    .conTent{
+        margin: 0.8rem 0.8rem 0.8rem 1.6rem;
+        font-family: 'Nunito', sans-serif;
+        font-weight: bold;
+    }
+    .vecTor{
+        margin: 0.8rem 0rem 0.8rem 0rem;
+    }
+}
+
+

src/components/common/ViewAllItem/ViewAllItem.tsx

@@ -0,0 +1,26 @@
+import Vector from 'src/components/icons/Vector'
+import s from './ViewAllItem.module.scss'
+import Link from 'next/link'
+
+interface Props {
+    className?: string
+    children?: any
+    link?: string
+}
+
+const ViewAllItem = ({ link }: Props) => {
+    return(
+        <div className={s.viewAll}>
+            <Link href={"/all"}>
+                <a className={s.conTent}>
+                    View All
+                </a>
+            </Link>
+            <div className={s.vecTor}>
+                <Vector />
+            </div>
+        </div>
+    )
+}
+
+export default ViewAllItem

src/components/common/index.ts

@@ -1,4 +1,6 @@
 export { default as ButtonCommon } from './ButtonCommon/ButtonCommon'
 export { default as Layout } from './Layout/Layout'
 export { default as Head } from './Head/Head'
-
+export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
+export { default as ItemWishList} from './ItemWishList/ItemWishList'
+export { default as Logo} from './Logo/Logo'

src/components/icons/Heart.tsx

@@ -0,0 +1,20 @@
+
+const Vector = ({ ...props }) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+            d="M20.16 4.99992C19.1 3.93713 17.6948 3.28846 16.1984 3.17109C14.7019 3.05372 13.2128 3.47539 12 4.35992C10.7277 3.41356 9.14402 2.98443 7.56795 3.15896C5.99188 3.33348 4.54047 4.0987 3.506 5.30051C2.47154 6.50231 1.93085 8.05144 1.99283 9.63594C2.05481 11.2204 2.71485 12.7226 3.84003 13.8399L10.05 20.0599C10.57 20.5717 11.2704 20.8585 12 20.8585C12.7296 20.8585 13.43 20.5717 13.95 20.0599L20.16 13.8399C21.3276 12.6652 21.983 11.0762 21.983 9.41992C21.983 7.76365 21.3276 6.17465 20.16 4.99992ZM18.75 12.4599L12.54 18.6699C12.4694 18.7413 12.3853 18.7979 12.2926 18.8366C12.1999 18.8752 12.1005 18.8951 12 18.8951C11.8996 18.8951 11.8002 18.8752 11.7075 18.8366C11.6148 18.7979 11.5307 18.7413 11.46 18.6699L5.25003 12.4299C4.46579 11.6283 4.02664 10.5514 4.02664 9.42992C4.02664 8.30846 4.46579 7.23158 5.25003 6.42992C6.04919 5.64091 7.127 5.19849 8.25003 5.19849C9.37306 5.19849 10.4509 5.64091 11.25 6.42992C11.343 6.52365 11.4536 6.59804 11.5755 6.64881C11.6973 6.69958 11.828 6.72572 11.96 6.72572C12.092 6.72572 12.2227 6.69958 12.3446 6.64881C12.4665 6.59804 12.5771 6.52365 12.67 6.42992C13.4692 5.64091 14.547 5.19849 15.67 5.19849C16.7931 5.19849 17.8709 5.64091 18.67 6.42992C19.4651 7.22107 19.9186 8.29211 19.9336 9.41361C19.9485 10.5351 19.5237 11.6179 18.75 12.4299V12.4599Z"
+            fill={props.color}
+        />
+      </svg>
+    )
+  }
+  
+  export default Vector

src/components/icons/Vector.tsx

@@ -0,0 +1,20 @@
+
+const Vector = ({ ...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"
+            fill="#5B9A74"
+        />
+      </svg>
+    )
+  }
+  
+  export default Vector