diff --git a/pages/test.tsx b/pages/test.tsx index a16ef6ed1..769a94e53 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -1,102 +1,84 @@ import { - CartDrawer, + FeaturedProductCard, Layout } from 'src/components/common'; -import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList'; // import { RecipeListPage } from 'src/components/modules/recipes'; import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'; -import { useModalCommon } from 'src/components/hooks'; +import { PRODUCT_DATA_TEST, PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data'; const CATEGORY = [ { - name: 'All', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`, + name: 'All', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`, }, { - name: 'Veggie', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, + name: 'Veggie', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, }, { - name: 'Seafood', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, + name: 'Seafood', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, }, { - name: 'Frozen', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, + name: 'Frozen', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, }, { - name: 'Coffee Bean', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`, + name: 'Coffee Bean', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`, }, { - name: 'Sauce', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`, + name: 'Sauce', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`, }, ] const BRAND = [ { - name: 'Maggi', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, + name: 'Maggi', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, }, { - name: 'Cholimes', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, + name: 'Cholimes', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, }, { - name: 'Chinsu', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, + name: 'Chinsu', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, } ]; const FEATURED = [ - { - name: 'Best Sellers', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, - }, - { - name: 'Sales', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, - }, - { - name: 'New Item', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, - }, - { - name: 'Viewed', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`, - } - ]; + { + name: 'Best Sellers', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, + }, + { + name: 'Sales', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, + }, + { + name: 'New Item', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, + }, + { + name: 'Viewed', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`, + } +]; -import CheckoutSuccess from 'src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess' -import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon' -import SkeletonParagraph from 'src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph' -import SkeletonImage from 'src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage' +const data = PRODUCT_DATA_TEST[0] export default function Test() { return ( <> -
-
- Lorem ipsum dolor sit amet. -
-
- {/* */} - - {/* */} - {/**/} - {/* - */} - {/* */} -
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit maiores aut, delectus assumenda explicabo, dolore facilis, quasi quae sed obcaecati doloribus dolorum architecto aperiam nisi dignissimos consequuntur amet neque possimus. -
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, porro aut. Quas, consequuntur! Officiis magni cum placeat magnam ut hic beatae error facere obcaecati. Labore eius explicabo fugit minus veritatis. -
-
+ ) } diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss index a0c33947d..32cf65655 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.module.scss +++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss @@ -103,6 +103,20 @@ } } } + &.small { + .inner { + padding: .5rem 1rem; + &.onlyIcon { + padding: 1rem; + } + @screen md { + padding: .8rem 1.6rem; + &.onlyIcon { + padding: .8rem; + } + } + } + } &.large { .inner { diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx index 965e9519e..d83621d30 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.tsx +++ b/src/components/common/ButtonCommon/ButtonCommon.tsx @@ -5,7 +5,7 @@ import s from './ButtonCommon.module.scss' interface Props { children?: React.ReactNode, type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone', - size?: 'default' | 'large', + size?: 'default' | 'large' | 'small', icon?: React.ReactNode, isIconSuffix?: boolean, loading?: boolean, diff --git a/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx b/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx index c1209c1f8..7b2cdd9ce 100644 --- a/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx +++ b/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx @@ -3,14 +3,14 @@ import { IconBuy } from 'src/components/icons' import ButtonCommon from '../ButtonCommon/ButtonCommon' interface Props { - type?: 'primary' | 'light' | 'ghost', - size?: 'default' | 'large', + type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone', + size?: 'default' | 'large' | 'small', loading?: boolean, disabled?: boolean, onClick?: () => void, } -const ButtonIconBuy = memo(({ type = 'light', size = 'default', loading = false, disabled, onClick }: Props) => { +const ButtonIconBuy = memo(({ type = 'light', size = 'small', loading = false, disabled, onClick }: Props) => { return ( div { + @apply bg-primary-light; + } + } } .button{ margin-left: 0.8rem; - width: 20.6rem; + flex: 1; + button { + @apply w-full; + } } } } diff --git a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx index fb3d82d41..9cd84235a 100644 --- a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx +++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx @@ -4,6 +4,7 @@ import s from './FeaturedProductCard.module.scss' import { LANGUAGE } from '../../../utils/language.utils' import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy' import ButtonCommon from '../ButtonCommon/ButtonCommon' +import { ImgWithLink } from '..' interface FeaturedProductCardProps extends FeaturedProductProps { buttonText?: string } @@ -19,7 +20,7 @@ const FeaturedProductCard = ({ return (
- image +
@@ -32,7 +33,7 @@ const FeaturedProductCard = ({
- +
{buttonText} diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx index af982cbd1..a46e8a6fb 100644 --- a/src/components/common/ProductCard/ProductCard.tsx +++ b/src/components/common/ProductCard/ProductCard.tsx @@ -63,15 +63,15 @@ const ProductCard = ({ { isSingleButton ?
- }>Add to cart + } size='small'>Add to cart
: <>
- +
- {buttonText} + {buttonText}
} diff --git a/src/components/common/QuanittyInput/QuanittyInput.module.scss b/src/components/common/QuanittyInput/QuanittyInput.module.scss index d8a0e5fc1..7609ad10d 100644 --- a/src/components/common/QuanittyInput/QuanittyInput.module.scss +++ b/src/components/common/QuanittyInput/QuanittyInput.module.scss @@ -1,10 +1,23 @@ @import '../../../styles/utilities'; -.quanittyInputWarper{ - border-color: theme("textColor.active"); - @apply border border-solid inline-flex justify-between items-center custom-border-radius; +.quanittyInputWarper { + @apply shape-common-border; + &::before{ + height: 100%; + top: 1px; + background-color: var(--text-active); + } + .inner { + @apply inline-flex justify-between items-center; + margin: 0; + } .plusIcon, .minusIcon{ + @apply flex justify-center items-center; + min-height: 2rem; &:hover{ cursor: pointer; + svg path { + fill: var(--primary); + } } } &.default{ diff --git a/src/components/common/QuanittyInput/QuanittyInput.tsx b/src/components/common/QuanittyInput/QuanittyInput.tsx index 20baba9ea..e31abb880 100644 --- a/src/components/common/QuanittyInput/QuanittyInput.tsx +++ b/src/components/common/QuanittyInput/QuanittyInput.tsx @@ -4,8 +4,8 @@ import classNames from 'classnames' import { IconMinus, IconPlus } from '../../icons' interface QuanittyInputProps extends Omit< - React.InputHTMLAttributes, - 'onChange' | 'min' | 'max' | 'step' | "type" | "size" + React.InputHTMLAttributes, + 'onChange' | 'min' | 'max' | 'step' | "type" | "size" > { size?: 'default' | 'small' onChange?: (value: number) => void @@ -63,18 +63,20 @@ const QuanittyInput = ({ return (
-
- -
- -
- +
+
+ +
+ +
+ +
) diff --git a/src/components/icons/IconMinus.tsx b/src/components/icons/IconMinus.tsx index abf3a2907..6e572412a 100644 --- a/src/components/icons/IconMinus.tsx +++ b/src/components/icons/IconMinus.tsx @@ -1,14 +1,14 @@ -const IconMinus = ({ ...props }) => { +const IconMinus = () => { return ( diff --git a/src/components/icons/IconPlus.tsx b/src/components/icons/IconPlus.tsx index 63d6d2dd4..634027c4e 100644 --- a/src/components/icons/IconPlus.tsx +++ b/src/components/icons/IconPlus.tsx @@ -1,14 +1,14 @@ -const IconPlus = ({ ...props }) => { +const IconPlus = () => { return ( diff --git a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss index 6ec4159a0..02a34d2bf 100644 --- a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss +++ b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss @@ -16,20 +16,5 @@ padding-top: 3.2rem; padding-bottom: 3.2rem; @apply flex justify-start spacing-horizontal; - .tab{ - font-family: var(--font-heading); - padding: 1.6rem 1.6rem 0.8rem 1.6rem; - font-size: 2.4rem; - line-height: 2.8rem; - @screen md{ - font-size: 3.2rem; - line-height: 4rem; - } - outline: none; - &.active{ - @apply text-background custom-border-radius bg-primary; - } - - } } } diff --git a/src/components/modules/home/HomeRecipe/HomeRecipe.tsx b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx index fa9daabf1..65c0b2ac7 100644 --- a/src/components/modules/home/HomeRecipe/HomeRecipe.tsx +++ b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import { HeadingCommon, ViewAllItem } from 'src/components/common' import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard' import RecipeCarousel from 'src/components/common/RecipeCarousel/RecipeCarousel' @@ -7,6 +7,7 @@ import classNames from 'classnames'; import image13 from "../../../../../public/assets/images/image13.png" import image14 from "../../../../../public/assets/images/image14.png" import image12 from "../../../../../public/assets/images/image12.png" +import HomeRecipeTab from './HomeRecipeTab/HomeRecipeTab' interface HomeRecipeProps { data?: RecipeCardProps[] @@ -44,7 +45,28 @@ const recipe:RecipeCardProps[] = [{ }] +const TABS = [ + { + name: 'Noodle', + value: 'Noodle', + }, + { + name: 'Curry', + value: 'Curry', + }, + { + name: 'Special Recipes', + value: 'Special Recipes', + } +] + const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipes" }: HomeRecipeProps) => { + const [activeTab, setActiveTab] = useState(TABS[0].value) + + const onTabChanged = (value: string) => { + setActiveTab(value) + } + return (
@@ -56,9 +78,14 @@ const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipe
- - - + { + TABS.map(item => ) + }
diff --git a/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss new file mode 100644 index 000000000..08c5e2777 --- /dev/null +++ b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss @@ -0,0 +1,17 @@ +@import "../../../../../styles/utilities"; + +.tab { + all: unset; + @apply heading-3 font-heading cursor-pointer outline-none; + padding: 1.6rem; + &:focus { + outline: none; + filter: brightness(1.05); + } + &:focus-visible { + outline: 2px solid var(--text-active); + } + &.active { + @apply text-background shape-common bg-primary; + } +} diff --git a/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx new file mode 100644 index 000000000..c9031bf1e --- /dev/null +++ b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx @@ -0,0 +1,26 @@ +import classNames from 'classnames'; +import React from 'react'; +import s from './HomeRecipeTab.module.scss' + +interface Props { + activeValue: string + name: string + value: string + onClick: (value: string) => void +} + + +const HomeRecipeTab = ({ activeValue, name, value, onClick }: Props) => { + const handleClick = () => { + onClick(value) + } + + return ( + + + ); +}; + +export default HomeRecipeTab; \ No newline at end of file diff --git a/src/styles/_base.scss b/src/styles/_base.scss index a3ba0a6db..41d33bdf1 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -3,7 +3,7 @@ :root { --primary: #5b9a74; - --primary-light: #e0f6e8; + --primary-light: #e3f2e9; --primary-lightest: #effaf4; --info-dark: #00317a; diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 5ce5f24af..af566560a 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -25,7 +25,7 @@ } .heading-3 { font-size: 24px; - line-height: 32px; + line-height: 28px; letter-spacing: -0.01em; font-weight: bold; text-transform: uppercase; @@ -114,8 +114,6 @@ .shape-common { position: relative; - $border: 2px; - margin: $border; clip-path: url(#svg-custom-shape); }