From 51ab7637f1a39cfe07b3b98c6cb7ec7ab2583170 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 15:12:39 +0700 Subject: [PATCH] refactor: ItemWishList component --- pages/index.tsx | 5 +++- .../ItemWishList/ItemWishList.module.scss | 8 +++++++ .../common/ItemWishList/ItemWishList.tsx | 23 ++++++++++++------- src/components/common/Logo/Logo.module.scss | 4 +--- src/components/common/Logo/Logo.tsx | 1 - .../ViewAllItem/ViewAllItem.module.scss | 6 +++-- src/components/icons/Heart.tsx | 1 - src/components/icons/Vector.tsx | 1 - 8 files changed, 32 insertions(+), 17 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 0005eacd0..0d2839418 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ -import { ButtonCommon, Layout } from 'src/components/common' +import { ButtonCommon, Layout, ViewAllItem, ItemWishList, Logo } from 'src/components/common' import { IconBuy } from 'src/components/icons' import { ButonType, ButtonSize } from 'src/utils/constanst.utils' export default function Home() { @@ -13,6 +13,9 @@ export default function Home() { }>{ButtonSize.large} - Button default large } disabled isIconSuffix={true}>Button with icon disabled } type={ButonType.light}>Button with icon + + +

Go to pages/index.tsx to get your hand dirty!

Go to src/components to make your awesome component!

Go to src/styles to find global styles!

diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index c827f4ff6..d87984bc6 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -7,4 +7,12 @@ display: flex; justify-content: center; align-items: center; + path{ + stroke: theme("colors.negative"); + } +} +.isToggleOn{ + path{ + stroke: theme("colors.primary"); + } } \ No newline at end of file diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx index 3474178e6..d381036e7 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -1,19 +1,26 @@ +import classNames from 'classnames' import { Heart } from '@components/icons' -import React, { useState } from 'react' +import React, { memo } from 'react' import s from './ItemWishList.module.scss' interface Props { - className?: string - children?: any + isActive?: boolean, + onClick?: () => void } -const ItemWishList = ({}:Props) => { - const [isClick,setClick] = useState(false) +const ItemWishList = memo(({isActive, onClick}:Props) => { + const handleClick = () => { + isActive = !isActive + } return( -
setClick(!isClick)}> - +
+
) -} +}) export default ItemWishList \ No newline at end of file diff --git a/src/components/common/Logo/Logo.module.scss b/src/components/common/Logo/Logo.module.scss index 72cde5cd0..2f5964f92 100644 --- a/src/components/common/Logo/Logo.module.scss +++ b/src/components/common/Logo/Logo.module.scss @@ -1,6 +1,4 @@ @import '../../../styles/utilities'; -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap'); - .logo{ display: flex; @@ -12,7 +10,7 @@ margin-right: 1.2rem; } .conTent{ - font-family: 'Poppins', sans-serif; + @apply font-logo; text-transform: uppercase; line-height: 3.2rem; letter-spacing: -0.02rem; diff --git a/src/components/common/Logo/Logo.tsx b/src/components/common/Logo/Logo.tsx index 44302e00b..5b82f2837 100644 --- a/src/components/common/Logo/Logo.tsx +++ b/src/components/common/Logo/Logo.tsx @@ -9,7 +9,6 @@ const Logo = ({}: Props) => { return(
-
ONLINE GROCERY diff --git a/src/components/common/ViewAllItem/ViewAllItem.module.scss b/src/components/common/ViewAllItem/ViewAllItem.module.scss index aee521b2d..0e481494f 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.module.scss +++ b/src/components/common/ViewAllItem/ViewAllItem.module.scss @@ -1,16 +1,18 @@ @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-family: var(--font-sans); font-weight: bold; } .vecTor{ margin: 0.8rem 0rem 0.8rem 0rem; + svg path{ + fill: theme("colors.primary"); + } } } diff --git a/src/components/icons/Heart.tsx b/src/components/icons/Heart.tsx index f8c39b6e5..227f41f21 100644 --- a/src/components/icons/Heart.tsx +++ b/src/components/icons/Heart.tsx @@ -11,7 +11,6 @@ const Vector = ({ ...props }) => { > ) diff --git a/src/components/icons/Vector.tsx b/src/components/icons/Vector.tsx index 989f8a125..b9c161940 100644 --- a/src/components/icons/Vector.tsx +++ b/src/components/icons/Vector.tsx @@ -11,7 +11,6 @@ const Vector = ({ ...props }) => { > )