Merge pull request #4 from KieIO/m1-tan

M1: Logo, ViewAllItem, WishList btn

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

@@ -1,10 +1,12 @@
-@import '../../../styles/utilities';
 
 .heartToggle{
     cursor: pointer;
-    width: 4.8rem;
-    height: 4.8rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    width: 2.4rem;
+    height: 2.4rem;
+}
+.isToggleOn{
+    svg path{
+        stroke: var(--negative);
+        fill: var(--negative);
+    }
 }

src/components/common/ItemWishList/ItemWishList.tsx

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

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

@@ -1,20 +1,18 @@
 @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");
+        background-color: var(--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;
+    .content{
+        @apply font-logo;
+        font-size: 16px;
+        line-height: 32px;
+        letter-spacing: -0.02em;
     }
 }

src/components/common/Logo/Logo.tsx

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

src/components/common/SelectCommon/SelectCommon.module.scss

@@ -0,0 +1,32 @@
+@import "../../../styles/utilities";
+
+.select{
+    @apply rounded-lg border-solid;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 1.2rem 1.6rem;
+    &.base{
+        width: 18.6rem;
+        height: 4.8rem;
+    }
+    &.large{
+        width: 34.25rem;
+        height: 5.6rem;
+    }
+    &.default{
+        @apply border;
+    }
+    &.custom{
+        @apply border-2;
+        border-color: var(--border-line);
+        color: var(--text-label);
+    }
+    .option{
+        &:hover{
+            background-color: black;
+        }
+    }
+}
+

src/components/common/SelectCommon/SelectCommon.tsx

@@ -0,0 +1,27 @@
+import s from './SelectCommon.module.scss'
+import classNames from 'classnames'
+
+interface Props {
+    placeHolder? : string,
+    size?: 'base' | 'large',
+    type?: 'default' | 'custom',
+    option: {name: string}[],
+}
+
+const SelectCommon = ({ type = 'default', size = 'base', option, placeHolder }: Props) => {
+    return(
+        <select className={classNames({
+            [s.select] : true,
+            [s[type]]: !!type,
+            [s[size]]: !!size,
+        })}
+        >
+            <option disabled selected hidden>{placeHolder}</option>
+            {
+                option.map(item => <option className={s.option} value={item.name}> {item.name} </option>)
+            }
+        </select>
+    )
+}
+
+export default SelectCommon

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

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

src/components/common/ViewAllItem/ViewAllItem.tsx

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

src/components/common/index.ts

@@ -19,3 +19,4 @@ export { default as Footer} from './Footer/Footer'
 export { default as MenuDropdown} from './MenuDropdown/MenuDropdown'
 export { default as NotiMessage} from './NotiMessage/NotiMessage'
 export { default as VideoPlayer} from './VideoPlayer/VideoPlayer'
+export { default as SelectCommon} from './SelectCommon/SelectCommon'

src/components/icons/IconHeart.tsx

@@ -8,4 +8,4 @@ const IconHeart = () => {
   )
 }
 
-export default IconHeart
+export default IconHeart

src/components/icons/IconVector.tsx

@@ -1,5 +1,5 @@
 
-const Vector = ({ ...props }) => {
+const IconVector = ({ ...props }) => {
     return (
       <svg
         width="24"
@@ -11,10 +11,9 @@ const Vector = ({ ...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
+  export default IconVector

src/components/icons/index.ts

@@ -1,4 +1,5 @@
 export { default as IconBuy } from './IconBuy'
+<<<<<<< HEAD
 export { default as ArrowUp } from './IconArrowUp'
 export { default as IconSearch } from './IconSearch'
 export { default as IconArrowRight } from './IconArrowRight'
@@ -8,3 +9,7 @@ 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 IconHeart } from './IconHeart'
+export { default as IconVector } from './IconVector'
+>>>>>>> 7d55bbf46e49a375575303f16ec393462c6c573d