From 1954d8c266a94135c760b8e7cab723e08626fbca Mon Sep 17 00:00:00 2001 From: quangnhankie Date: Mon, 30 Aug 2021 19:39:35 +0700 Subject: [PATCH 01/29] feat: create component MenuFilter and MenuNavigation --- package-lock.json | 27 +++++++++ pages/index.tsx | 7 ++- .../common/MenuFilter/MenuFilter.module.scss | 46 ++++++++++++++ .../common/MenuFilter/MenuFilter.tsx | 59 ++++++++++++++++++ .../MenuNavigation/MenuNavigation.module.scss | 29 +++++++++ .../common/MenuNavigation/MenuNavigation.tsx | 60 +++++++++++++++++++ src/components/common/index.ts | 2 + src/utils/constanst.utils.ts | 2 +- 8 files changed, 229 insertions(+), 3 deletions(-) create mode 100644 src/components/common/MenuFilter/MenuFilter.module.scss create mode 100644 src/components/common/MenuFilter/MenuFilter.tsx create mode 100644 src/components/common/MenuNavigation/MenuNavigation.module.scss create mode 100644 src/components/common/MenuNavigation/MenuNavigation.tsx diff --git a/package-lock.json b/package-lock.json index 5e63e2d25..72b57bcbc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5239,6 +5239,11 @@ } } }, + "load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=" + }, "loader-utils": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz", @@ -5547,6 +5552,11 @@ "safe-buffer": "^5.1.2" } }, + "memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -8588,6 +8598,11 @@ "scheduler": "^0.20.2" } }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "react-fast-marquee": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.2.1.tgz", @@ -8603,6 +8618,18 @@ "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz", "integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==" }, + "react-player": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz", + "integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==", + "requires": { + "deepmerge": "^4.0.0", + "load-script": "^1.0.0", + "memoize-one": "^5.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.0.1" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", diff --git a/pages/index.tsx b/pages/index.tsx index 2e5fe6afb..06d12a024 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,15 +1,18 @@ import { Layout } from 'src/components/common'; +import { MenuNavigation,MenuFilter} from 'src/components/common'; import { HomeBanner, HomeCategories, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home'; export default function Home() { return ( <> - + {/* - + */} + + ) } diff --git a/src/components/common/MenuFilter/MenuFilter.module.scss b/src/components/common/MenuFilter/MenuFilter.module.scss new file mode 100644 index 000000000..afb66799b --- /dev/null +++ b/src/components/common/MenuFilter/MenuFilter.module.scss @@ -0,0 +1,46 @@ +@import "../../../styles/utilities"; +.menuFilterWrapper{ + @apply spacing-horizontal ; + @screen md { + @apply hidden; + } + .menuFilterHeading{ + @apply sub-headline font-bold ; + color: var(--text-active); + font-feature-settings: 'salt' on; + margin: 0.8rem 0; + } + .menuFilterList{ + @apply flex flex-wrap justify-start relative; + margin-bottom: 3rem; + box-sizing: border-box; + li{ + margin: 1rem 0; + padding:0; + a{ + padding: 0.8rem 1.6rem; + margin-right: 0.8rem; + font-size: var(--font-size); + line-height: var(--line-height); + color:var(--text-base); + background-color: var(--gray); + border-radius: 0.8rem; + &:hover { + color:white; + background-color: var(--primary); + } + &.active { + color:white; + background-color: var(--primary); + } + } + } + &::after{ + @apply absolute; + bottom: -20%; + content: ""; + width: 100%; + border-bottom: 1px solid #EBEBEB; + } + } +} diff --git a/src/components/common/MenuFilter/MenuFilter.tsx b/src/components/common/MenuFilter/MenuFilter.tsx new file mode 100644 index 000000000..f6a2c9d4c --- /dev/null +++ b/src/components/common/MenuFilter/MenuFilter.tsx @@ -0,0 +1,59 @@ +import classNames from 'classnames' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' +import s from './MenuFilter.module.scss' +const CATEGORY = [ + { + name: 'All', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`, + }, + { + name: 'Veggie', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, + }, + { + name: 'Seafood', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, + }, + { + name: 'Frozen', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, + }, + { + name: 'Coffee Bean', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`, + }, + { + name: 'Sauce', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`, + }, +] + +interface Props { + children?: any, + heading:string, +} + +const MenuFilter = ({heading}:Props)=> { + const router = useRouter() + + return ( +
+

{heading}

+ +
+ ) +} + +export default MenuFilter diff --git a/src/components/common/MenuNavigation/MenuNavigation.module.scss b/src/components/common/MenuNavigation/MenuNavigation.module.scss new file mode 100644 index 000000000..0b3dcae8b --- /dev/null +++ b/src/components/common/MenuNavigation/MenuNavigation.module.scss @@ -0,0 +1,29 @@ +@import "../../../styles/utilities"; +.menuNavigationWrapper{ + .menuNavigationHeading{ + @screen md { + @apply sub-headline font-bold ; + color: var(--text-active); + font-feature-settings: 'salt' on; + margin: 1.6rem 0; + } + } + .menuNavigationList{ + @screen md { + li{ + margin: 0.8rem 0; + a{ + font-size: var(--font-size); + line-height: var(--line-height); + color:var(--text-base); + &:hover { + @apply text-primary; + } + &.active { + @apply text-primary; + } + } + } + } + } +} diff --git a/src/components/common/MenuNavigation/MenuNavigation.tsx b/src/components/common/MenuNavigation/MenuNavigation.tsx new file mode 100644 index 000000000..f0b9bcfc9 --- /dev/null +++ b/src/components/common/MenuNavigation/MenuNavigation.tsx @@ -0,0 +1,60 @@ +import classNames from 'classnames' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' +import s from './MenuNavigation.module.scss' +const CATEGORY = [ + { + name: 'All', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`, + }, + { + name: 'Veggie', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, + }, + { + name: 'Seafood', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, + }, + { + name: 'Frozen', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, + }, + { + name: 'Coffee Bean', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`, + }, + { + name: 'Sauce', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`, + }, +] + +interface Props { + children?: any, + heading:string, +} + +const MenuNavigation = ({heading}:Props)=> { + const router = useRouter() + + return ( +
+

{heading}({CATEGORY.length})

+ +
+ ) +} + +export default MenuNavigation diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 650ec34bc..b58b68f57 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -23,3 +23,5 @@ 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' +export { default as MenuNavigation} from './MenuNavigation/MenuNavigation' +export { default as MenuFilter} from './MenuFilter/MenuFilter' \ No newline at end of file diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index 0d66ecda0..cddbbb07e 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -38,10 +38,10 @@ export enum ProductFeature { Sales = 'Sales', NewItem = 'New Item', Viewed = 'Viewed', - } export const KEY = { ENTER: 'Enter', } +export const OPTION_ALL = 'all'; \ No newline at end of file From 78813a063cd418d2a40c2e0481a7420de620a16e Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 31 Aug 2021 10:58:52 +0700 Subject: [PATCH 02/29] feat; pagination productList --- pages/test.tsx | 228 +++++++++++++++++- .../PaginationCommon.module.scss | 22 ++ .../PaginationCommon/PaginationCommon.tsx | 77 +++++- .../components/PaginationItem.tsx | 21 ++ .../ProductList/ProductList.module.scss | 11 + .../common/ProductList/ProductList.tsx | 30 +++ src/components/common/index.ts | 1 + src/components/icons/ArrowLeftSmall.tsx | 18 ++ src/components/icons/ArrowRightSmall.tsx | 18 ++ src/components/icons/index.ts | 2 + tailwind.config.js | 5 +- 11 files changed, 421 insertions(+), 12 deletions(-) create mode 100644 src/components/common/PaginationCommon/components/PaginationItem.tsx create mode 100644 src/components/common/ProductList/ProductList.module.scss create mode 100644 src/components/common/ProductList/ProductList.tsx create mode 100644 src/components/icons/ArrowLeftSmall.tsx create mode 100644 src/components/icons/ArrowRightSmall.tsx diff --git a/pages/test.tsx b/pages/test.tsx index 6a1922f5a..9f6a08ec0 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -6,8 +6,232 @@ import { ModalConfirm, ModalInfo, ProductCarousel, + ProductList, } from 'src/components/common' - +import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon' +import image5 from '../public/assets/images/image5.png' +import image6 from '../public/assets/images/image6.png' +import image7 from '../public/assets/images/image7.png' +import image8 from '../public/assets/images/image8.png' +const dataTest = [ + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image6.src, + }, + { + name: 'Carrot', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image7.src, + }, + { + name: 'Salad', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image8.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image6.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image6.src, + }, + { + name: 'Carrot', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image7.src, + }, + { + name: 'Salad', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image8.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image6.src, + }, +] export default function Test() { const [visible, setVisible] = useState(false) const onClose = () => { @@ -22,6 +246,8 @@ export default function Test() { Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi? + + ) } diff --git a/src/components/common/PaginationCommon/PaginationCommon.module.scss b/src/components/common/PaginationCommon/PaginationCommon.module.scss index e69de29bb..6470cd72f 100644 --- a/src/components/common/PaginationCommon/PaginationCommon.module.scss +++ b/src/components/common/PaginationCommon/PaginationCommon.module.scss @@ -0,0 +1,22 @@ +.warpper{ + .item{ + @apply inline-flex items-center justify-center cursor-pointer; + background-color: var(--gray); + margin: 0 0.4rem; + width: 3.2rem; + height: 3.2rem; + &.active{ + @apply border border-solid; + border-color: var(--text-active); + background-color: var(--white); + } + &.disable{ + svg{ + path{ + fill: var(--disabled) + } + } + @apply text-disabled cursor-not-allowed; + } + } +} \ No newline at end of file diff --git a/src/components/common/PaginationCommon/PaginationCommon.tsx b/src/components/common/PaginationCommon/PaginationCommon.tsx index 59bbd3baa..d0df5efe7 100644 --- a/src/components/common/PaginationCommon/PaginationCommon.tsx +++ b/src/components/common/PaginationCommon/PaginationCommon.tsx @@ -1,15 +1,74 @@ -import React from 'react' - +import classNames from 'classnames' +import React, { useEffect, useState } from 'react' +import { ArrowLeftSmall, ArrowRightSmall } from 'src/components/icons' +import PaginationItem from './components/PaginationItem' +import s from './PaginationCommon.module.scss' interface PaginationCommonProps { - + defaultCurrent?: number + pageSize: number + total: number + onChange?: (page: number, pageSize: number) => void } -const PaginationCommon = (props: PaginationCommonProps) => { - return ( -
- -
- ) +const PaginationCommon = ({ + total, + pageSize, + defaultCurrent, + onChange, +}: PaginationCommonProps) => { + const [pageNum, setPageNum] = useState(0) + const [currentPage, setCurrentPage] = useState(0) + useEffect(() => { + setPageNum(Math.ceil(total / pageSize)) + }, [total, pageSize]) + + useEffect(() => { + if (defaultCurrent) { + setCurrentPage(defaultCurrent) + } + }, [defaultCurrent]) + + const onPageClick = (page: number) => { + setCurrentPage(page) + onChange && onChange(page, pageSize) + } + + const onPrevClick = () => { + setCurrentPage(currentPage - 1 < 0 ? 0 : currentPage - 1) + } + + const onNextClick = () => { + setCurrentPage((currentPage + 1) > (pageNum - 1) ? (pageNum - 1) : currentPage + 1) + } + + return ( +
+
+ +
+ {[...Array(pageNum).keys()].map((index) => { + return ( + + ) + })} +
= pageNum - 1, + })} + onClick={onNextClick} + > + = pageNum} /> +
+
+ ) } export default PaginationCommon diff --git a/src/components/common/PaginationCommon/components/PaginationItem.tsx b/src/components/common/PaginationCommon/components/PaginationItem.tsx new file mode 100644 index 000000000..e5f526bc4 --- /dev/null +++ b/src/components/common/PaginationCommon/components/PaginationItem.tsx @@ -0,0 +1,21 @@ +import classNames from 'classnames' +import React from 'react' +import s from "../PaginationCommon.module.scss" +interface PaginationItemProps { + onClick:(page:number)=>void + page:number + active:boolean +} + +const PaginationItem = ({onClick, page, active}: PaginationItemProps) => { + const onPageClick = () => { + onClick && onClick(page) + } + return ( +
+ {page+1} +
+ ) +} + +export default PaginationItem diff --git a/src/components/common/ProductList/ProductList.module.scss b/src/components/common/ProductList/ProductList.module.scss new file mode 100644 index 000000000..040275c7a --- /dev/null +++ b/src/components/common/ProductList/ProductList.module.scss @@ -0,0 +1,11 @@ +.wrapper{ + .list{ + max-width: 109.4rem; + @apply flex flex-wrap; + } + .pagination{ + padding-top: 4.8rem; + max-width: 109.4rem; + @apply flex justify-center items-center ; + } +} \ No newline at end of file diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx new file mode 100644 index 000000000..22b80b358 --- /dev/null +++ b/src/components/common/ProductList/ProductList.tsx @@ -0,0 +1,30 @@ +import React, { useState } from 'react' +import PaginationCommon from '../PaginationCommon/PaginationCommon' +import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard' +import s from "./ProductList.module.scss" +interface ProductListProps { + data: ProductCardProps[] +} + +const ProductList = ({data}: ProductListProps) => { + const [currentPage, setCurrentPage] = useState(0) + const onPageChange = (page:number) => { + setCurrentPage(page) + } + return ( +
+
+ { + data.slice(currentPage*20,(currentPage+1)*20).map((product)=>{ + return + }) + } +
+
+ +
+
+ ) +} + +export default ProductList diff --git a/src/components/common/index.ts b/src/components/common/index.ts index ba7743f70..65f90627e 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -30,3 +30,4 @@ export { default as SelectCommon} from './SelectCommon/SelectCommon' export { default as ModalCommon} from './ModalCommon/ModalCommon' export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm" export { default as ModalInfo} from "./ModalInfo/ModalInfo" +export { default as ProductList} from "./ProductList/ProductList" diff --git a/src/components/icons/ArrowLeftSmall.tsx b/src/components/icons/ArrowLeftSmall.tsx new file mode 100644 index 000000000..7bb82665d --- /dev/null +++ b/src/components/icons/ArrowLeftSmall.tsx @@ -0,0 +1,18 @@ +const ArrowLeft = ({ ...props }) => { + return ( + + + + ) +} + +export default ArrowLeft diff --git a/src/components/icons/ArrowRightSmall.tsx b/src/components/icons/ArrowRightSmall.tsx new file mode 100644 index 000000000..36b4cd589 --- /dev/null +++ b/src/components/icons/ArrowRightSmall.tsx @@ -0,0 +1,18 @@ +const ArrowRight = ({ ...props }) => { + return ( + + + + ) +} + +export default ArrowRight diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 02b4947cb..2fdbd96f8 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -14,4 +14,6 @@ export { default as IconGoogleColor } from './IconGoogleColor' export { default as IconApple } from './IconApple' export { default as ArrowLeft } from './ArrowLeft' export { default as ArrowRight } from './ArrowRight' +export { default as ArrowLeftSmall } from './ArrowLeftSmall' +export { default as ArrowRightSmall } from './ArrowRightSmall' export { default as Close } from './Close' diff --git a/tailwind.config.js b/tailwind.config.js index f94c85fd8..028e78f05 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -109,12 +109,13 @@ module.exports = { rounded: '.8rem', }, screens: { + 'sm-only': {'min': '0', 'max': '767px'}, 'sm': '640px', // => @media (min-width: 640px) { ... } - + 'md-only': {'min': '768px', 'max': '1023px'}, 'md': '768px', // => @media (min-width: 768px) { ... } - + 'lg-only': {'min': '1024px', 'max': '1279px'}, 'lg': '1024px', // => @media (min-width: 1024px) { ... } From 51d30bb9e440bf69ffa4f14431028670f3322439 Mon Sep 17 00:00:00 2001 From: quangnhankie Date: Tue, 31 Aug 2021 15:37:09 +0700 Subject: [PATCH 03/29] fix: fix bug Components MenuFilter and MenuNavigation follow by review of Ly Tran --- pages/index.tsx | 32 +++++++++++++++-- .../common/MenuFilter/MenuFilter.module.scss | 5 +-- .../common/MenuFilter/MenuFilter.tsx | 34 +++---------------- .../MenuNavigation/MenuNavigation.module.scss | 2 -- .../common/MenuNavigation/MenuNavigation.tsx | 34 +++---------------- 5 files changed, 39 insertions(+), 68 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 06d12a024..5d1140b77 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -2,7 +2,33 @@ import { Layout } from 'src/components/common'; import { MenuNavigation,MenuFilter} from 'src/components/common'; import { HomeBanner, HomeCategories, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home'; - +import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' +const CATEGORY = [ + { + name: 'All', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`, + }, + { + name: 'Veggie', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, + }, + { + name: 'Seafood', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, + }, + { + name: 'Frozen', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, + }, + { + name: 'Coffee Bean', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`, + }, + { + name: 'Sauce', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`, + }, +] export default function Home() { return ( <> @@ -11,8 +37,8 @@ export default function Home() { */} - - + + ) } diff --git a/src/components/common/MenuFilter/MenuFilter.module.scss b/src/components/common/MenuFilter/MenuFilter.module.scss index afb66799b..b08f370d8 100644 --- a/src/components/common/MenuFilter/MenuFilter.module.scss +++ b/src/components/common/MenuFilter/MenuFilter.module.scss @@ -20,9 +20,6 @@ a{ padding: 0.8rem 1.6rem; margin-right: 0.8rem; - font-size: var(--font-size); - line-height: var(--line-height); - color:var(--text-base); background-color: var(--gray); border-radius: 0.8rem; &:hover { @@ -40,7 +37,7 @@ bottom: -20%; content: ""; width: 100%; - border-bottom: 1px solid #EBEBEB; + border-bottom: 1px solid var(--border-line); } } } diff --git a/src/components/common/MenuFilter/MenuFilter.tsx b/src/components/common/MenuFilter/MenuFilter.tsx index f6a2c9d4c..e43c6384a 100644 --- a/src/components/common/MenuFilter/MenuFilter.tsx +++ b/src/components/common/MenuFilter/MenuFilter.tsx @@ -1,41 +1,17 @@ import classNames from 'classnames' import Link from 'next/link' import { useRouter } from 'next/router' -import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' + import s from './MenuFilter.module.scss' -const CATEGORY = [ - { - name: 'All', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`, - }, - { - name: 'Veggie', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, - }, - { - name: 'Seafood', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, - }, - { - name: 'Frozen', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, - }, - { - name: 'Coffee Bean', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`, - }, - { - name: 'Sauce', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`, - }, -] + interface Props { children?: any, heading:string, + categories:{name:string,link:string}[] } -const MenuFilter = ({heading}:Props)=> { +const MenuFilter = ({heading,categories}:Props)=> { const router = useRouter() return ( @@ -43,7 +19,7 @@ const MenuFilter = ({heading}:Props)=> {

{heading}