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

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'