From 51ab7637f1a39cfe07b3b98c6cb7ec7ab2583170 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 15:12:39 +0700 Subject: [PATCH 1/6] 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 }) => { > ) From 73c8e0ce669fec91da0b15ddc3fd65080c4d7167 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 15:26:37 +0700 Subject: [PATCH 2/6] refactor: add Icon prelix into filename Heart and Vector in common/icons --- src/components/common/ItemWishList/ItemWishList.module.scss | 4 ++-- src/components/common/ItemWishList/ItemWishList.tsx | 4 ++-- src/components/common/ViewAllItem/ViewAllItem.tsx | 4 ++-- src/components/icons/{Heart.tsx => IconHeart.tsx} | 4 ++-- src/components/icons/{Vector.tsx => IconVector.tsx} | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) rename src/components/icons/{Heart.tsx => IconHeart.tsx} (96%) rename src/components/icons/{Vector.tsx => IconVector.tsx} (94%) diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index d87984bc6..9646b650c 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -8,11 +8,11 @@ justify-content: center; align-items: center; path{ - stroke: theme("colors.negative"); + fill: theme("colors.negative"); } } .isToggleOn{ path{ - stroke: theme("colors.primary"); + fill: 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 d381036e7..01ecc9817 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames' -import { Heart } from '@components/icons' +import IconHeart from 'src/components/icons/IconHeart' import React, { memo } from 'react' import s from './ItemWishList.module.scss' @@ -18,7 +18,7 @@ const ItemWishList = memo(({isActive, onClick}:Props) => { [s.isToggleOn]:isActive })} onClick={handleClick}> - +
) }) diff --git a/src/components/common/ViewAllItem/ViewAllItem.tsx b/src/components/common/ViewAllItem/ViewAllItem.tsx index 4b6daff4c..e85b6181b 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.tsx +++ b/src/components/common/ViewAllItem/ViewAllItem.tsx @@ -1,4 +1,4 @@ -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' @@ -17,7 +17,7 @@ const ViewAllItem = ({ link }: Props) => {
- +
) diff --git a/src/components/icons/Heart.tsx b/src/components/icons/IconHeart.tsx similarity index 96% rename from src/components/icons/Heart.tsx rename to src/components/icons/IconHeart.tsx index 227f41f21..cb2a763b3 100644 --- a/src/components/icons/Heart.tsx +++ b/src/components/icons/IconHeart.tsx @@ -1,5 +1,5 @@ -const Vector = ({ ...props }) => { +const IconHeart = ({ ...props }) => { return ( { ) } - export default Vector \ No newline at end of file + export default IconHeart \ No newline at end of file diff --git a/src/components/icons/Vector.tsx b/src/components/icons/IconVector.tsx similarity index 94% rename from src/components/icons/Vector.tsx rename to src/components/icons/IconVector.tsx index b9c161940..e4a10f559 100644 --- a/src/components/icons/Vector.tsx +++ b/src/components/icons/IconVector.tsx @@ -1,5 +1,5 @@ -const Vector = ({ ...props }) => { +const IconVector = ({ ...props }) => { return ( { ) } - export default Vector \ No newline at end of file + export default IconVector \ No newline at end of file From ffca0a14ac80229055eb3d0653e1147e0ed0ad2b Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 15:38:53 +0700 Subject: [PATCH 3/6] styles: ItemWishList toggle full color in heart icon --- src/components/common/ItemWishList/ItemWishList.module.scss | 6 +++--- src/components/icons/IconHeart.tsx | 6 +++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index 9646b650c..debaa0550 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -8,11 +8,11 @@ justify-content: center; align-items: center; path{ - fill: theme("colors.negative"); + stroke: theme("colors.primary"); } } .isToggleOn{ - path{ - fill: theme("colors.primary"); + svg path{ + stroke: theme("colors.primary"); } } \ No newline at end of file diff --git a/src/components/icons/IconHeart.tsx b/src/components/icons/IconHeart.tsx index cb2a763b3..0d868c5e7 100644 --- a/src/components/icons/IconHeart.tsx +++ b/src/components/icons/IconHeart.tsx @@ -10,7 +10,11 @@ const IconHeart = ({ ...props }) => { {...props} > ) From 146aa6309f90a53231ebaf52c7111f584f2f85a6 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 15:43:04 +0700 Subject: [PATCH 4/6] feat: ItemWishList components add onChange event --- src/components/common/ItemWishList/ItemWishList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx index 01ecc9817..5adef90b8 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -6,9 +6,10 @@ import s from './ItemWishList.module.scss' interface Props { isActive?: boolean, onClick?: () => void + onChange?: () => void } -const ItemWishList = memo(({isActive, onClick}:Props) => { +const ItemWishList = memo(({isActive, onClick, onChange}:Props) => { const handleClick = () => { isActive = !isActive } From bf2a2c08320e2dac012c36033d6e909f53f2375e Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 15:49:18 +0700 Subject: [PATCH 5/6] remove: remove props interface never use --- src/components/common/Logo/Logo.tsx | 3 +-- src/components/common/ViewAllItem/ViewAllItem.tsx | 2 -- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/common/Logo/Logo.tsx b/src/components/common/Logo/Logo.tsx index 5b82f2837..06f9d57f3 100644 --- a/src/components/common/Logo/Logo.tsx +++ b/src/components/common/Logo/Logo.tsx @@ -1,8 +1,7 @@ import s from './Logo.module.scss' interface Props { - className?: string - children?: any + } const Logo = ({}: Props) => { diff --git a/src/components/common/ViewAllItem/ViewAllItem.tsx b/src/components/common/ViewAllItem/ViewAllItem.tsx index e85b6181b..b9d4e4efe 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.tsx +++ b/src/components/common/ViewAllItem/ViewAllItem.tsx @@ -3,8 +3,6 @@ import s from './ViewAllItem.module.scss' import Link from 'next/link' interface Props { - className?: string - children?: any link?: string } From e83f3e0512427c01e5f71ba5129153412c5f06f7 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 16:15:52 +0700 Subject: [PATCH 6/6] styles: width, height 4.8rem down to 2.4rem --- .../common/ItemWishList/ItemWishList.module.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index debaa0550..c7d30d246 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -2,11 +2,8 @@ .heartToggle{ cursor: pointer; - width: 4.8rem; - height: 4.8rem; - display: flex; - justify-content: center; - align-items: center; + width: 2.4rem; + height: 2.4rem; path{ stroke: theme("colors.primary"); }