From 887c3ae2e33ab223c3f98331203a98e0e87f4196 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 30 Aug 2021 17:20:35 +0700 Subject: [PATCH 01/61] :art: styles: product info detail :%s --- grocery-vercel-commerce | 1 - pages/product/[slug].tsx | 77 ++----------------- src/components/common/Header/Header.tsx | 2 +- src/components/hooks/index.ts | 1 + src/components/hooks/useModalCommon.tsx | 4 +- .../ProductInfoDetail.module.scss | 0 .../ProductInfoDetail/ProductInfoDetail.tsx | 20 +++++ .../ProductImgs/ProductImgs.module.scss | 6 ++ .../components/ProductImgs/ProductImgs.tsx | 24 ++++++ .../ProductInfo/ProductInfo.module.scss | 40 ++++++++++ .../components/ProductInfo/ProductInfo.tsx | 37 +++++++++ .../modules/product-detail/index.ts | 1 + src/styles/_base.scss | 2 +- src/utils/language.utils.ts | 1 + 14 files changed, 141 insertions(+), 75 deletions(-) delete mode 160000 grocery-vercel-commerce create mode 100644 src/components/hooks/index.ts create mode 100644 src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx create mode 100644 src/components/modules/product-detail/index.ts diff --git a/grocery-vercel-commerce b/grocery-vercel-commerce deleted file mode 160000 index 3c7aa8e86..000000000 --- a/grocery-vercel-commerce +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 3c7aa8e862bfd8d44719be44c6c0a31ab01524a3 diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index c5bcbdba1..b26de19bb 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -1,76 +1,11 @@ -import { Layout } from '@components/common' -import commerce from '@lib/api/commerce' -import type { - GetStaticPathsContext, - GetStaticPropsContext, - InferGetStaticPropsType -} from 'next' -import { useRouter } from 'next/router' -export async function getStaticProps({ - params, - locale, - locales, - preview, -}: GetStaticPropsContext<{ slug: string }>) { - const config = { locale, locales } - const pagesPromise = commerce.getAllPages({ config, preview }) - const siteInfoPromise = commerce.getSiteInfo({ config, preview }) - const productPromise = commerce.getProduct({ - variables: { slug: params!.slug }, - config, - preview, - }) +import { Layout } from 'src/components/common' +import { ProductInfoDetail } from 'src/components/modules/product-detail' - const allProductsPromise = commerce.getAllProducts({ - variables: { first: 4 }, - config, - preview, - }) - const { pages } = await pagesPromise - const { categories } = await siteInfoPromise - const { product } = await productPromise - const { products: relatedProducts } = await allProductsPromise - - if (!product) { - throw new Error(`Product with slug '${params!.slug}' not found`) - } - - return { - props: { - pages, - product, - relatedProducts, - categories, - }, - revalidate: 200, - } -} - -export async function getStaticPaths({ locales }: GetStaticPathsContext) { - const { products } = await commerce.getAllProductPaths() - - return { - paths: locales - ? locales.reduce((arr, locale) => { - // Add a product path for every locale - products.forEach((product: any) => { - arr.push(`/${locale}/product${product.path}`) - }) - return arr - }, []) - : products.map((product: any) => `/product${product.path}`), - fallback: 'blocking', - } -} - -export default function Slug({ - product, - relatedProducts, -}: InferGetStaticPropsType) { - const router = useRouter() - - return
This is product page
+export default function Slug() { + return <> + + } Slug.Layout = Layout diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index e9a06b9a8..a9926f765 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' import React, { memo, useEffect, useState } from 'react' -import { useModalCommon } from 'src/components/hooks/useModalCommon' +import { useModalCommon } from 'src/components/hooks' import { isMobile } from 'src/utils/funtion.utils' import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate' import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo' diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts new file mode 100644 index 000000000..cf83feb42 --- /dev/null +++ b/src/components/hooks/index.ts @@ -0,0 +1 @@ +export { default as useModalCommon } from './useModalCommon' diff --git a/src/components/hooks/useModalCommon.tsx b/src/components/hooks/useModalCommon.tsx index 02626ce94..41aed648f 100644 --- a/src/components/hooks/useModalCommon.tsx +++ b/src/components/hooks/useModalCommon.tsx @@ -4,7 +4,7 @@ interface Props { initialValue?: boolean, } -export const useModalCommon = ({ initialValue = false }: Props) => { +const useModalCommon = ({ initialValue = false }: Props) => { const [visible, setVisible] = useState(initialValue) const openModal = (e?: any) => { @@ -21,3 +21,5 @@ export const useModalCommon = ({ initialValue = false }: Props) => { visible, openModal, closeModal } }; + +export default useModalCommon \ No newline at end of file diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx new file mode 100644 index 000000000..d1047bd3a --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import ProductImgs from './components/ProductImgs/ProductImgs' +import ProductInfo from './components/ProductInfo/ProductInfo' +import s from './ProductInfoDetail.module.scss' + +interface Props { + className?: string + children?: any +} + +const ProductInfoDetail = ({ }: Props) => { + return ( +
+ + +
+ ) +} + +export default ProductInfoDetail diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss new file mode 100644 index 000000000..b368095e0 --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss @@ -0,0 +1,6 @@ +.productImgs { + .img { + @apply w-full h-full; + object-fit: cover; + } +} diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx new file mode 100644 index 000000000..3a20a6f64 --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import { CarouselCommon } from 'src/components/common' +import s from './ProductImgs.module.scss' + +interface ImgProps { + src: string, alt?: string +} + +interface Props { + className?: string + children?: any, + // data: ImgProps[] +} + +const ProductImgs = ({ }: Props) => { + return ( +
+ {/* /> */} + +
+ ) +} + +export default ProductImgs diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss new file mode 100644 index 000000000..468e352ed --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss @@ -0,0 +1,40 @@ +@import "../../../../../../styles/utilities"; + +.productInfo { + .info { + margin-bottom: 3.2rem; + .heading { + @apply heading-2 font-heading; + margin-top: 0.8rem; + } + .price { + margin-top: 0.8rem; + .old { + margin-bottom: 0.8rem; + .number { + margin-right: 0.8rem; + color: var(--text-label); + text-decoration: line-through; + } + } + .current { + @apply text-active; + } + } + .description { + margin-top: 0.8rem; + } + } + .bottom { + @screen md { + margin-top: 2.4rem; + max-width: 39rem; + button { + @apply w-full; + &:first-child { + margin-bottom: 0.8rem; + } + } + } + } +} diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx new file mode 100644 index 000000000..aeaf3e699 --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common' +import { LANGUAGE } from 'src/utils/language.utils' +import s from './ProductInfo.module.scss' + +interface Props { + className?: string + children?: any, +} + +const ProductInfo = ({ }: Props) => { + return ( +
+
+ SEAFOOD +

SeaPAk

+
+
+ Rp 32.000 + -15% +
+
Rp 27.500
+
+
+ In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley +
+
+ +
+ {LANGUAGE.BUTTON_LABEL.BUY_NOW} + {LANGUAGE.BUTTON_LABEL.ADD_TO_CARD} +
+
+ ) +} + +export default ProductInfo diff --git a/src/components/modules/product-detail/index.ts b/src/components/modules/product-detail/index.ts new file mode 100644 index 000000000..79dd056d0 --- /dev/null +++ b/src/components/modules/product-detail/index.ts @@ -0,0 +1 @@ +export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail' diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 67eb96726..e17e36944 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -21,7 +21,7 @@ --warning-light: #fef8eb; --negative-dark: #741a06; - --negative: #f34f2b; + --negative: #D1644D; --negative-border-line: #fddfd8; --negative-light: #feefec; diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts index 3f8d61926..cb7760943 100644 --- a/src/utils/language.utils.ts +++ b/src/utils/language.utils.ts @@ -2,6 +2,7 @@ export const LANGUAGE = { BUTTON_LABEL: { BUY_NOW: 'Buy now', SHOP_NOW: 'Shop now', + ADD_TO_CARD: 'Add to Cart' }, PLACE_HOLDER: { SEARCH: 'Search', From f6504be74f6ec48106fd4f312efc0c16a4cd78ae Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 30 Aug 2021 18:22:03 +0700 Subject: [PATCH 02/61] :art: styles: product info responsive :%s --- .../ProductInfoDetail.module.scss | 9 ++++ .../ProductImgs/ProductImgs.module.scss | 7 +++ .../ProductInfo/ProductInfo.module.scss | 45 ++++++++++++++++++- .../components/ProductInfo/ProductInfo.tsx | 16 +++++-- tailwind.config.js | 17 ++++--- 5 files changed, 81 insertions(+), 13 deletions(-) diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss index e69de29bb..f9b621b82 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss @@ -0,0 +1,9 @@ +@import '../../../../styles/utilities'; + +.productInfoDetail { + @apply spacing-horizontal; + margin: 0 auto 4rem; + @screen md { + @apply flex; + } +} \ No newline at end of file diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss index b368095e0..20f296a4a 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss @@ -1,4 +1,11 @@ .productImgs { + @apply w-full; + @screen sm-only { + margin-bottom: 2rem; + } + @screen lg { + max-width: 60rem; + } .img { @apply w-full h-full; object-fit: cover; diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss index 468e352ed..749725c89 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss @@ -1,6 +1,13 @@ @import "../../../../../../styles/utilities"; .productInfo { + @screen md { + max-width: 39rem; + margin-left: 4.8rem; + } + @screen lg { + margin-left: 11.2rem; + } .info { margin-bottom: 3.2rem; .heading { @@ -25,12 +32,46 @@ margin-top: 0.8rem; } } + .actions { + @screen sm-only { + @apply fixed flex justify-between items-center bg-white w-full; + z-index: 10000; + bottom: 0; + left: 0; + padding: 2rem; + } + } .bottom { + @screen sm-only { + @apply flex justify-between items-center flex-row-reverse; + margin-left: 1rem; + flex: 1; + button { + &:first-child { + min-width: 13rem; + } + &:nth-child(n + 1) { + margin-left: 0.8rem; + } + } + } + .buttonWithIcon { + @apply flex items-center; + .label { + @apply hidden; + @screen md { + @apply inline-block; + margin-left: 0.8rem; + } + } + } + button { + @apply w-full; + } + @screen md { margin-top: 2.4rem; - max-width: 39rem; button { - @apply w-full; &:first-child { margin-bottom: 0.8rem; } diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx index aeaf3e699..25fea44aa 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -1,5 +1,6 @@ import React from 'react' import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common' +import { IconBuy } from 'src/components/icons' import { LANGUAGE } from 'src/utils/language.utils' import s from './ProductInfo.module.scss' @@ -25,10 +26,17 @@ const ProductInfo = ({ }: Props) => { In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley - -
- {LANGUAGE.BUTTON_LABEL.BUY_NOW} - {LANGUAGE.BUTTON_LABEL.ADD_TO_CARD} +
+ +
+ {LANGUAGE.BUTTON_LABEL.BUY_NOW} + + + + {LANGUAGE.BUTTON_LABEL.ADD_TO_CARD} + + +
) diff --git a/tailwind.config.js b/tailwind.config.js index f94c85fd8..894a7ab6e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -49,17 +49,17 @@ module.exports = { 'background': 'var(--background)', 'white': 'var(--white)', - 'background-arrow':'var(--background-arrow)', + 'background-arrow': 'var(--background-arrow)', + - 'disabled': 'var(--text-disabled)', line: 'var(--border-line)', background: 'var(--background)', white: 'var(--white)', gray: 'var(--gray)', disabled: 'var(--text-disabled)', - 'background-arrow':'var(--background-arrow)', - + 'background-arrow': 'var(--background-arrow)', + // @deprecated (NOT use these variables) 'primary-2': 'var(--primary-2)', secondary: 'var(--secondary)', @@ -93,7 +93,7 @@ module.exports = { label: 'var(--text-label)', placeholder: 'var(--text-placeholder)', primary: 'var(--primary)', - + // @deprecated (NOT use these variables) secondary: 'var(--text-secondary)', }, @@ -109,12 +109,15 @@ 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) { ... } @@ -124,8 +127,8 @@ module.exports = { '2xl': '1536px', // => @media (min-width: 1536px) { ... } }, - caroucel:{ - "arrow-height":"64px" + caroucel: { + "arrow-height": "64px" }, }, }, From a7d0eb051c3e040c12e7708874d8531f97b70e91 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 30 Aug 2021 18:32:45 +0700 Subject: [PATCH 03/61] :art: styles: product detail imgs :%s --- .../ImgWithLink/ImgWithLink.module.scss | 4 +++ .../common/ImgWithLink/ImgWithLink.tsx | 16 ++++++++++ src/components/common/index.ts | 1 + .../ProductImgs/ProductImgs.module.scss | 6 +--- .../components/ProductImgs/ProductImgs.tsx | 32 ++++++++++++++----- .../ProductInfo/ProductInfo.module.scss | 2 +- 6 files changed, 47 insertions(+), 14 deletions(-) create mode 100644 src/components/common/ImgWithLink/ImgWithLink.module.scss create mode 100644 src/components/common/ImgWithLink/ImgWithLink.tsx diff --git a/src/components/common/ImgWithLink/ImgWithLink.module.scss b/src/components/common/ImgWithLink/ImgWithLink.module.scss new file mode 100644 index 000000000..b1587bfa6 --- /dev/null +++ b/src/components/common/ImgWithLink/ImgWithLink.module.scss @@ -0,0 +1,4 @@ +.imgWithLink { + @apply w-full h-full; + object-fit: cover; +} diff --git a/src/components/common/ImgWithLink/ImgWithLink.tsx b/src/components/common/ImgWithLink/ImgWithLink.tsx new file mode 100644 index 000000000..43ac1caa6 --- /dev/null +++ b/src/components/common/ImgWithLink/ImgWithLink.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import s from './ImgWithLink.module.scss' + +export interface ImgWithLinkProps { + src: string, + alt?: string, +} + +const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => { + return ( + {alt} + + ) +} + +export default ImgWithLink \ No newline at end of file diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 5848f41cd..def6d83b0 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -30,3 +30,4 @@ export { default as VideoPlayer} from './VideoPlayer/VideoPlayer' export { default as SelectCommon} from './SelectCommon/SelectCommon' export { default as ModalCommon} from './ModalCommon/ModalCommon' export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo' +export { default as ImgWithLink} from './ImgWithLink/ImgWithLink' diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss index 20f296a4a..a10eb5865 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss @@ -1,13 +1,9 @@ .productImgs { - @apply w-full; + @apply w-full flex justify-between items-center; @screen sm-only { margin-bottom: 2rem; } @screen lg { max-width: 60rem; } - .img { - @apply w-full h-full; - object-fit: cover; - } } diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx index 3a20a6f64..325c6b453 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx @@ -1,22 +1,38 @@ import React from 'react' -import { CarouselCommon } from 'src/components/common' +import { CarouselCommon, ImgWithLink } from 'src/components/common' +import { ImgWithLinkProps } from 'src/components/common/ImgWithLink/ImgWithLink' import s from './ProductImgs.module.scss' -interface ImgProps { - src: string, alt?: string -} - interface Props { className?: string children?: any, - // data: ImgProps[] +} + +const DATA = [ + { + src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png', + alt: 'Broccoli', + }, + { + src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png', + alt: 'Broccoli', + } +] + +const option = { + slidesPerView: 1, } const ProductImgs = ({ }: Props) => { return (
- {/* /> */} - + + data={DATA} + itemKey="product-detail-img" + Component={ImgWithLink} + option={option} + isDot={true} + />
) } diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss index 749725c89..403782c51 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss @@ -25,7 +25,7 @@ } } .current { - @apply text-active; + @apply text-active font-bold sm-headline; } } .description { From 1954d8c266a94135c760b8e7cab723e08626fbca Mon Sep 17 00:00:00 2001 From: quangnhankie Date: Mon, 30 Aug 2021 19:39:35 +0700 Subject: [PATCH 04/61] 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 51d30bb9e440bf69ffa4f14431028670f3322439 Mon Sep 17 00:00:00 2001 From: quangnhankie Date: Tue, 31 Aug 2021 15:37:09 +0700 Subject: [PATCH 05/61] 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}

    { - CATEGORY.map(item =>
  • + categories.map(item =>
  • {item.name} diff --git a/src/components/common/MenuNavigation/MenuNavigation.module.scss b/src/components/common/MenuNavigation/MenuNavigation.module.scss index 0b3dcae8b..64d6ef756 100644 --- a/src/components/common/MenuNavigation/MenuNavigation.module.scss +++ b/src/components/common/MenuNavigation/MenuNavigation.module.scss @@ -13,8 +13,6 @@ li{ margin: 0.8rem 0; a{ - font-size: var(--font-size); - line-height: var(--line-height); color:var(--text-base); &:hover { @apply text-primary; diff --git a/src/components/common/MenuNavigation/MenuNavigation.tsx b/src/components/common/MenuNavigation/MenuNavigation.tsx index f0b9bcfc9..ca665f0ec 100644 --- a/src/components/common/MenuNavigation/MenuNavigation.tsx +++ b/src/components/common/MenuNavigation/MenuNavigation.tsx @@ -1,49 +1,23 @@ 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, + categories:{name:string,link:string}[] } -const MenuNavigation = ({heading}:Props)=> { +const MenuNavigation = ({heading,categories}:Props)=> { const router = useRouter() return (
    -

    {heading}({CATEGORY.length})

    +

    {heading}({categories.length})

      { - CATEGORY.map(item =>
    • From 6169634dcafb1d89799710f9963937a7ff610139 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 1 Sep 2021 16:04:07 +0700 Subject: [PATCH 06/61] :art: styles: component recipe detail :%s --- pages/demo.tsx | 13 ++++ pages/index.tsx | 2 +- pages/product/[slug].tsx | 3 +- .../RecipeDetail/RecipeDetail.module.scss | 62 +++++++++++++++++++ .../common/RecipeDetail/RecipeDetail.tsx | 59 ++++++++++++++++++ .../RecipeBriefInfo.module.scss | 19 ++++++ .../RecipeBriefInfo/RecipeBriefInfo.tsx | 29 +++++++++ src/components/common/index.ts | 1 + src/components/icons/IconLocation.tsx | 11 ++++ src/components/icons/IconPeople.tsx | 11 ++++ src/components/icons/IconTime.tsx | 11 ++++ src/components/icons/index.ts | 3 + src/styles/_base.scss | 3 +- 13 files changed, 224 insertions(+), 3 deletions(-) create mode 100644 pages/demo.tsx create mode 100644 src/components/common/RecipeDetail/RecipeDetail.module.scss create mode 100644 src/components/common/RecipeDetail/RecipeDetail.tsx create mode 100644 src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss create mode 100644 src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx create mode 100644 src/components/icons/IconLocation.tsx create mode 100644 src/components/icons/IconPeople.tsx create mode 100644 src/components/icons/IconTime.tsx diff --git a/pages/demo.tsx b/pages/demo.tsx new file mode 100644 index 000000000..5ca1c8040 --- /dev/null +++ b/pages/demo.tsx @@ -0,0 +1,13 @@ +import { Layout, RecipeDetail } from 'src/components/common'; +import { ProductInfoDetail } from 'src/components/modules/product-detail' + + + +export default function Demo() { + return <> + + + +} + +Demo.Layout = Layout diff --git a/pages/index.tsx b/pages/index.tsx index 0ddbcfe80..203cf253d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -14,7 +14,7 @@ export default function Home() { - // todo: uncomment + {/* // todo: uncomment */} {/* */} ) diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index b26de19bb..adf1fd8dd 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -1,10 +1,11 @@ -import { Layout } from 'src/components/common' +import { Layout, RecipeDetail } from 'src/components/common' import { ProductInfoDetail } from 'src/components/modules/product-detail' export default function Slug() { return <> + } diff --git a/src/components/common/RecipeDetail/RecipeDetail.module.scss b/src/components/common/RecipeDetail/RecipeDetail.module.scss new file mode 100644 index 000000000..64c8db389 --- /dev/null +++ b/src/components/common/RecipeDetail/RecipeDetail.module.scss @@ -0,0 +1,62 @@ +@import "../../../styles/utilities"; + +.recipeDetail { + @apply spacing-horizontal; + margin: 5.6rem auto; + @screen md { + @apply flex; + } + .img { + width: fit-content; + margin: auto; + margin-top: 0; + + @screen sm-only { + margin-bottom: 2rem; + } + @screen lg { + max-width: 60rem; + } + img { + @apply w-full; + object-fit: contain; + max-height: 64rem; + border-radius: 2.4rem; + @screen md { + max-height: 90rem; + } + } + } + + .recipeInfo { + @screen md { + max-width: 39rem; + margin-left: 4.8rem; + } + @screen lg { + margin-left: 11.2rem; + } + .top { + margin-bottom: 4.8rem; + .name { + @apply heading-1 font-heading; + margin-bottom: 1.6rem; + } + } + .detail { + .item { + &:not(:last-child) { + margin-bottom: 2.4rem; + } + .heading { + @apply heading-3 font-heading; + margin-bottom: 0.8rem; + } + .content { + list-style: disc; + margin-left: 2rem; + } + } + } + } +} diff --git a/src/components/common/RecipeDetail/RecipeDetail.tsx b/src/components/common/RecipeDetail/RecipeDetail.tsx new file mode 100644 index 000000000..715c61ed2 --- /dev/null +++ b/src/components/common/RecipeDetail/RecipeDetail.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import RecipeBriefInfo from './components/RecipeBriefInfo/RecipeBriefInfo' +import s from './RecipeDetail.module.scss' + + +interface Props { + className?: string + children?: any +} + +const RecipeDetail = ({ }: Props) => { + return ( +
      +
      + Recipe +
      +
      +
      +

      + Crispy Fried Calamari +

      + +
      +
      +
      +

      Ingredients

      +
        +
      • Canola oil for frying
        • +
      • 1 pound clean squid bodies cut in 1/4 inch rings and dried with a paper towel
        • +
      • 2 cups flour
        • +
      • 1/2 teaspoon kosher salt
        • +
      • 1/2 teaspoon garlic powder
        • +
      • 1/8 teaspoon coarse ground black pepper
        • +
      • 1 lemon cut into wedges
        • +
      +
      + +
      +

      Preparation

      +
        +
      • 1In a large pot or dutch oven add three inches of oil and bring to 350 degrees.
        • +
      • Add the flour, salt, garlic powder and pepper to a large bowl and stir to combine.
        • +
      • Toss the squid pieces in the flour then into the hot oil.
        • +
      • Fry the squid for 1-2 minutes. You want the color to stay pale like in the pictures.
        • +
      • Remove to a cookie sheet to drain (do not add paper towels as it will steam the calamari and make it soft.)
        • +
      • Serve with lemon wedges.
        • +
      +
      +       +
      +
      +
      + ) +} + +export default RecipeDetail diff --git a/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss new file mode 100644 index 000000000..56f1e6500 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss @@ -0,0 +1,19 @@ +.recipeBriefInfo { + @apply flex; + .item { + @apply flex; + &:not(:last-child) { + margin-right: 2.4rem; + } + svg { + width: 2rem; + height: 2rem; + path { + fill: var(--text-label); + } + } + .content { + margin-left: 0.8rem; + } + } +} diff --git a/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx new file mode 100644 index 000000000..d06387914 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { IconLocation, IconPeople, IconTime } from 'src/components/icons' +import s from './RecipeBriefInfo.module.scss' + +interface Props { + className?: string + children?: any, +} + +const RecipeBriefInfo = ({ }: Props) => { + return ( +
      +
      + +
      15 minutes
      +
      +
      + +
      4 People
      +
      +
      + +
      15 minutes
      +
      +
      + ) +} + +export default RecipeBriefInfo diff --git a/src/components/common/index.ts b/src/components/common/index.ts index def6d83b0..8f193bd5f 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -31,3 +31,4 @@ export { default as SelectCommon} from './SelectCommon/SelectCommon' export { default as ModalCommon} from './ModalCommon/ModalCommon' export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo' export { default as ImgWithLink} from './ImgWithLink/ImgWithLink' +export { default as RecipeDetail} from './RecipeDetail/RecipeDetail' diff --git a/src/components/icons/IconLocation.tsx b/src/components/icons/IconLocation.tsx new file mode 100644 index 000000000..3dc0a81b9 --- /dev/null +++ b/src/components/icons/IconLocation.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconLocation = () => { + return ( + + + + ) +} + +export default IconLocation diff --git a/src/components/icons/IconPeople.tsx b/src/components/icons/IconPeople.tsx new file mode 100644 index 000000000..0075b0f75 --- /dev/null +++ b/src/components/icons/IconPeople.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconPeople = () => { + return ( + + + + ) +} + +export default IconPeople diff --git a/src/components/icons/IconTime.tsx b/src/components/icons/IconTime.tsx new file mode 100644 index 000000000..81064df9d --- /dev/null +++ b/src/components/icons/IconTime.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconTime = () => { + return ( + + + + ) +} + +export default IconTime diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index d71c1bbec..8180f1001 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -19,3 +19,6 @@ export { default as IconPassword } from './IconPassword' export { default as IconPasswordCross } from './IconPasswordCross' export { default as IconError } from './IconError' export { default as IconCheck } from './IconCheck' +export { default as IconTime } from './IconTime' +export { default as IconPeople } from './IconPeople' +export { default as IconLocation } from './IconLocation' diff --git a/src/styles/_base.scss b/src/styles/_base.scss index e17e36944..339db22d2 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -79,5 +79,6 @@ html { } a { - -webkit-tap-highlight-color: var(--text-active); + -webkit-tap-highlight-color: var(--primary); + color: var(--primary); } From 9cc2d2ffc49dc34524cb2aa9201d32327cc6e944 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 1 Sep 2021 17:36:49 +0700 Subject: [PATCH 07/61] :art: styles: recipe ingradients :%s --- pages/demo.tsx | 5 +- .../InfoProducts/InfoProducts.module.scss | 0 .../InfoProducts/InfoProducts.tsx | 18 ++++++ .../ProductCard/ProductCard.module.scss | 5 +- .../common/ProductCard/ProductCard.tsx | 9 +++ .../ProductNotSell/ProductNotSell.module.scss | 27 ++++++++ .../ProductNotSell/ProductNotSell.tsx | 28 +++++++++ .../RecipeDetail/RecipeDetail.module.scss | 62 ------------------- .../common/RecipeDetail/RecipeDetail.tsx | 52 +++------------- .../RecipeDetailInfo.module.scss | 62 +++++++++++++++++++ .../RecipeDetailInfo/RecipeDetailInfo.tsx | 59 ++++++++++++++++++ .../RecipeIngredient.module.scss | 18 ++++++ .../RecipeIngredient/RecipeIngredient.tsx | 33 ++++++++++ src/styles/_base.scss | 1 - src/styles/_utilities.scss | 5 ++ src/utils/types.utils.ts | 1 + 16 files changed, 274 insertions(+), 111 deletions(-) create mode 100644 src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss create mode 100644 src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx create mode 100644 src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss create mode 100644 src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx create mode 100644 src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss create mode 100644 src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx create mode 100644 src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss create mode 100644 src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx diff --git a/pages/demo.tsx b/pages/demo.tsx index 5ca1c8040..81714a811 100644 --- a/pages/demo.tsx +++ b/pages/demo.tsx @@ -1,12 +1,13 @@ import { Layout, RecipeDetail } from 'src/components/common'; -import { ProductInfoDetail } from 'src/components/modules/product-detail' +import { ProductInfoDetail } from 'src/components/modules/product-detail'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; export default function Demo() { return <> - + } diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx new file mode 100644 index 000000000..30ef3bca8 --- /dev/null +++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + + +interface Props { + title: string, + subtitle?: string, +} + +const InfoProducts = ({ title, subtitle }: Props) => { + return ( +
      + InfoProducts + {title} +
      + ); +}; + +export default InfoProducts; \ No newline at end of file diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss index 97dce1794..8f9c5e73f 100644 --- a/src/components/common/ProductCard/ProductCard.module.scss +++ b/src/components/common/ProductCard/ProductCard.module.scss @@ -4,6 +4,9 @@ padding: 1.2rem 1.2rem 0 1.2rem; margin-bottom: 1px; @apply flex flex-col justify-between; + &.notSell { + @apply justify-center; + } .cardTop{ @apply relative; height: 13.8rem; @@ -29,8 +32,6 @@ .cardMidTop{ .productname{ font-weight: bold; - line-height: 2.4rem; - font-size: 1.6rem; color: var(--text-active); &:hover{ cursor: pointer; diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx index 7d94be6bc..4f1e3b329 100644 --- a/src/components/common/ProductCard/ProductCard.tsx +++ b/src/components/common/ProductCard/ProductCard.tsx @@ -6,6 +6,7 @@ import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy' import ItemWishList from '../ItemWishList/ItemWishList' import LabelCommon from '../LabelCommon/LabelCommon' import s from './ProductCard.module.scss' +import ProductNotSell from './ProductNotSell/ProductNotSell' export interface ProductCardProps extends ProductProps { buttonText?: string @@ -18,7 +19,15 @@ const ProductCard = ({ price, buttonText = 'Buy Now', imageSrc, + isNotSell, }: ProductCardProps) => { + if (isNotSell) { + return
      + +
      + + } + return (
      diff --git a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss new file mode 100644 index 000000000..4945220a9 --- /dev/null +++ b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss @@ -0,0 +1,27 @@ +@import "../../../../styles/utilities"; + +.imgWrap { + img { + opacity: 0.5; + } +} + +.name { + @apply text-label cursor-default font-bold; +} + +.info { + @apply flex justify-center items-center custom-border-radius bg-info-light text-center; + padding: .8rem 1.6rem; + margin-top: 1.6rem; + color: var(--info); + svg { + @apply u-icon; + path { + fill: currentColor; + } + } + .text { + margin-left: 0.8rem; + } +} diff --git a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx new file mode 100644 index 000000000..f87d87c43 --- /dev/null +++ b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { IconInfo } from 'src/components/icons'; +import ImgWithLink from '../../ImgWithLink/ImgWithLink'; +import s from './ProductNotSell.module.scss'; + +export interface Props { + name: string, + imageSrc: string, +} + +const ProductNotSell = ({ name, imageSrc }: Props) => { + return ( + <> +
      + +
      +
      {name}
      +
      + +
      + Not Sell +
      +
      + + ); +}; + +export default ProductNotSell; \ No newline at end of file diff --git a/src/components/common/RecipeDetail/RecipeDetail.module.scss b/src/components/common/RecipeDetail/RecipeDetail.module.scss index 64c8db389..e69de29bb 100644 --- a/src/components/common/RecipeDetail/RecipeDetail.module.scss +++ b/src/components/common/RecipeDetail/RecipeDetail.module.scss @@ -1,62 +0,0 @@ -@import "../../../styles/utilities"; - -.recipeDetail { - @apply spacing-horizontal; - margin: 5.6rem auto; - @screen md { - @apply flex; - } - .img { - width: fit-content; - margin: auto; - margin-top: 0; - - @screen sm-only { - margin-bottom: 2rem; - } - @screen lg { - max-width: 60rem; - } - img { - @apply w-full; - object-fit: contain; - max-height: 64rem; - border-radius: 2.4rem; - @screen md { - max-height: 90rem; - } - } - } - - .recipeInfo { - @screen md { - max-width: 39rem; - margin-left: 4.8rem; - } - @screen lg { - margin-left: 11.2rem; - } - .top { - margin-bottom: 4.8rem; - .name { - @apply heading-1 font-heading; - margin-bottom: 1.6rem; - } - } - .detail { - .item { - &:not(:last-child) { - margin-bottom: 2.4rem; - } - .heading { - @apply heading-3 font-heading; - margin-bottom: 0.8rem; - } - .content { - list-style: disc; - margin-left: 2rem; - } - } - } - } -} diff --git a/src/components/common/RecipeDetail/RecipeDetail.tsx b/src/components/common/RecipeDetail/RecipeDetail.tsx index 715c61ed2..cdec99994 100644 --- a/src/components/common/RecipeDetail/RecipeDetail.tsx +++ b/src/components/common/RecipeDetail/RecipeDetail.tsx @@ -1,57 +1,21 @@ import React from 'react' -import RecipeBriefInfo from './components/RecipeBriefInfo/RecipeBriefInfo' +import { ProductCardProps } from '../ProductCard/ProductCard' +import RecipeDetailInfo from './components/RecipeDetailInfo/RecipeDetailInfo' +import RecipeIngredient from './components/RecipeIngredient/RecipeIngredient' import s from './RecipeDetail.module.scss' interface Props { className?: string - children?: any + children?: any, + ingredients: ProductCardProps[], } -const RecipeDetail = ({ }: Props) => { +const RecipeDetail = ({ ingredients }: Props) => { return (
      -
      - Recipe -
      -
      -
      -

      - Crispy Fried Calamari -

      - -
      -
      -
      -

      Ingredients

      -
        -
      • Canola oil for frying
        • -
      • 1 pound clean squid bodies cut in 1/4 inch rings and dried with a paper towel
        • -
      • 2 cups flour
        • -
      • 1/2 teaspoon kosher salt
        • -
      • 1/2 teaspoon garlic powder
        • -
      • 1/8 teaspoon coarse ground black pepper
        • -
      • 1 lemon cut into wedges
        • -
      -
      - -
      -

      Preparation

      -
        -
      • 1In a large pot or dutch oven add three inches of oil and bring to 350 degrees.
        • -
      • Add the flour, salt, garlic powder and pepper to a large bowl and stir to combine.
        • -
      • Toss the squid pieces in the flour then into the hot oil.
        • -
      • Fry the squid for 1-2 minutes. You want the color to stay pale like in the pictures.
        • -
      • Remove to a cookie sheet to drain (do not add paper towels as it will steam the calamari and make it soft.)
        • -
      • Serve with lemon wedges.
        • -
      -
      - -
      -
      + +
      ) } diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss new file mode 100644 index 000000000..0262705b1 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss @@ -0,0 +1,62 @@ +@import "../../../../../styles/utilities"; + +.recipeDetailInfo { + @apply spacing-horizontal; + margin: 5.6rem auto; + @screen md { + @apply flex; + } + .img { + width: fit-content; + margin: auto; + margin-top: 0; + + @screen sm-only { + margin-bottom: 2rem; + } + @screen lg { + max-width: 60rem; + } + img { + @apply w-full; + object-fit: contain; + max-height: 64rem; + border-radius: 2.4rem; + @screen md { + max-height: 90rem; + } + } + } + + .recipeInfo { + @screen md { + max-width: 39rem; + margin-left: 4.8rem; + } + @screen lg { + margin-left: 11.2rem; + } + .top { + margin-bottom: 4.8rem; + .name { + @apply heading-1 font-heading; + margin-bottom: 1.6rem; + } + } + .detail { + .item { + &:not(:last-child) { + margin-bottom: 2.4rem; + } + .heading { + @apply heading-3 font-heading; + margin-bottom: 0.8rem; + } + .content { + list-style: disc; + margin-left: 2rem; + } + } + } + } +} diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx new file mode 100644 index 000000000..4d212e10a --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import RecipeBriefInfo from '../RecipeBriefInfo/RecipeBriefInfo' +import s from './RecipeDetailInfo.module.scss' + + +interface Props { + className?: string + children?: any +} + +const RecipeDetailInfo = ({ }: Props) => { + return ( +
      +
      + Recipe +
      +
      +
      +

      + Crispy Fried Calamari +

      + +
      +
      +
      +

      Ingredients

      +
        +
      • Canola oil for frying
        • +
      • 1 pound clean squid bodies cut in 1/4 inch rings and dried with a paper towel
        • +
      • 2 cups flour
        • +
      • 1/2 teaspoon kosher salt
        • +
      • 1/2 teaspoon garlic powder
        • +
      • 1/8 teaspoon coarse ground black pepper
        • +
      • 1 lemon cut into wedges
        • +
      +
      + +
      +

      Preparation

      +
        +
      • 1In a large pot or dutch oven add three inches of oil and bring to 350 degrees.
        • +
      • Add the flour, salt, garlic powder and pepper to a large bowl and stir to combine.
        • +
      • Toss the squid pieces in the flour then into the hot oil.
        • +
      • Fry the squid for 1-2 minutes. You want the color to stay pale like in the pictures.
        • +
      • Remove to a cookie sheet to drain (do not add paper towels as it will steam the calamari and make it soft.)
        • +
      • Serve with lemon wedges.
        • +
      +
      + +
      +
      +
      + ) +} + +export default RecipeDetailInfo diff --git a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss new file mode 100644 index 000000000..ba4bcd2e7 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss @@ -0,0 +1,18 @@ +@import "../../../../../styles/utilities"; + +.recipeIngredient { + margin: 5.6rem auto; + .top { + @apply flex justify-between items-center spacing-horizontal; + } + .bottom { + @apply flex justify-center items-center spacing-horizontal; + margin-top: 4rem; + button { + width: 100%; + @screen md { + width: 39rem; + } + } + } +} diff --git a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx new file mode 100644 index 000000000..a879f0b72 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import ButtonCommon from 'src/components/common/ButtonCommon/ButtonCommon' +import HeadingCommon from 'src/components/common/HeadingCommon/HeadingCommon' +import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard' +import ProductCarousel from 'src/components/common/ProductCarousel/ProductCarousel' +import ViewAllItem from 'src/components/common/ViewAllItem/ViewAllItem' +import { ROUTE } from 'src/utils/constanst.utils' +import s from './RecipeIngredient.module.scss' + +interface Props { + className?: string + children?: any, + data: ProductCardProps[], +} + +const RecipeIngredient = ({ data }: Props) => { + return ( +
      +
      + Ingredients +
      + +
      +
      + +
      + Buy all +
      +
      + ) +} + +export default RecipeIngredient diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 339db22d2..e90a6434f 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -80,5 +80,4 @@ html { a { -webkit-tap-highlight-color: var(--primary); - color: var(--primary); } diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 26cea17c0..56f9494ec 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -137,4 +137,9 @@ } } } + + .u-icon { + width: 2rem; + height: 2rem; + } } diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts index 2c99df73a..3d2383495 100644 --- a/src/utils/types.utils.ts +++ b/src/utils/types.utils.ts @@ -4,6 +4,7 @@ export interface ProductProps { weight: string price: string imageSrc: string + isNotSell?: boolean } export interface FeaturedProductProps { From 42ebe880b85c5af8b57e21897da45f64b2e847ce Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 1 Sep 2021 17:37:19 +0700 Subject: [PATCH 08/61] :blue_book: docs: data product test :%s --- src/utils/demo-data.ts | 60 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/utils/demo-data.ts diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts new file mode 100644 index 000000000..6521f0aa6 --- /dev/null +++ b/src/utils/demo-data.ts @@ -0,0 +1,60 @@ +export const PRODUCT_DATA_TEST = [ + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + isNotSell: true, + }, + { + name: 'Carrot', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png", + }, + { + name: 'Salad', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png", + isNotSell: true, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646224-d22dc2e4-6ae8-4bbe-adcf-491ce191f09b.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646225-2728f192-481b-4142-99b0-dde92f53c6c6.png", + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png", + }, +] \ No newline at end of file From db0d16b2c1311ee44d0965674b897ae149c4cb58 Mon Sep 17 00:00:00 2001 From: quangnhankie Date: Fri, 3 Sep 2021 20:42:54 +0700 Subject: [PATCH 09/61] feat: create component MenuNavigationProductList --- public/assets/svg/check.svg | 3 + .../MenuNavigationProductList.module.scss | 43 ++++++++++++ .../MenuNavigationProductList.tsx | 57 ++++++++++++++++ .../MenuSort/MenuSort.module.scss | 46 +++++++++++++ .../MenuSort/MenuSort.tsx | 67 +++++++++++++++++++ 5 files changed, 216 insertions(+) create mode 100644 public/assets/svg/check.svg create mode 100644 src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss create mode 100644 src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx create mode 100644 src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss create mode 100644 src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx diff --git a/public/assets/svg/check.svg b/public/assets/svg/check.svg new file mode 100644 index 000000000..c1f952011 --- /dev/null +++ b/public/assets/svg/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss new file mode 100644 index 000000000..37d06e555 --- /dev/null +++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss @@ -0,0 +1,43 @@ +@import "../../../styles/utilities"; +.menuNavigationProductListDesktop{ + @apply hidden; +} +.menuNavigationProductListMobile{ + @apply hidden; + @screen md { + @apply hidden; + } + &.isShow{ + @apply block; + } + .menuNavigationProductModal{ + background: rgba(0, 0, 0, 0.5); + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 10000; + .content{ + @apply spacing-horizontal; + margin-top: 3rem; + padding-top: 2rem ; + padding-bottom: 5rem; + background-color: white; + overflow: auto; + height: 100%; + border-radius: 2.4rem 2.4rem 0 0; + .head{ + @apply flex justify-between; + h3{ + @apply heading-3 font-bold; + color:var(--text-base); + } + } + button{ + margin-top: 2rem; + width: 100%; + } + } + } +} \ No newline at end of file diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx new file mode 100644 index 000000000..be067a184 --- /dev/null +++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx @@ -0,0 +1,57 @@ +import React, { useState } from 'react'; +import {ButtonCommon, MenuFilter, MenuNavigation} from 'src/components/common'; +import s from './MenuNavigationProductList.module.scss'; +import {IconHide} from 'src/components/icons'; +import MenuSort from './MenuSort/MenuSort'; +import {LANGUAGE} from 'src/utils/language.utils'; +import classNames from 'classnames' +interface Props{ + categories:{name:string,link:string}[], + brands:{name:string,link:string}[], + featured:{name:string,link:string}[], +} + +const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{ + + const [dataSort,setDataSort] = useState({}); + const [isShow,setIsShow] = useState(true); + + function handleValue(value:Object){ + setDataSort({...dataSort,...value}); + } + function filter(){ + console.log(dataSort) + } + + function hideMenu(){ + if(isShow === true){ + setIsShow(false); + } + } + return( + <> +
      + + + +
      +
      +
      +
      +
      +

      FILTER

      +
      +
      + + + + + {LANGUAGE.BUTTON_LABEL.CONFIRM} +
      +
      +
      + + ) +} + +export default MenuNavigationProductList \ No newline at end of file diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss new file mode 100644 index 000000000..a25752901 --- /dev/null +++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss @@ -0,0 +1,46 @@ +@import "../../../../styles/utilities"; +.menuSortWrapper{ + + @screen md { + @apply hidden; + } + .menuSortHeading{ + @apply sub-headline font-bold ; + color: var(--text-active); + font-feature-settings: 'salt' on; + margin: 0.8rem 0; + } + .menuSortList{ + box-sizing: border-box; + &::after{ + @apply absolute; + top: 110%; + content: ""; + width: 100%; + border-bottom: 1px solid var(--border-line); + } + li{ + div{ + height: 4.8rem; + line-height: 4.8rem; + padding: 0 1.6rem; + margin-right: 0.8rem; + border-radius: 0.8rem; + &.active { + @apply font-bold relative; + color:var(--text-active); + background-color: var(--primary-lightest); + &::after{ + @apply absolute; + content:""; + background-image: url('/assets/svg/check.svg'); + right: 1.6rem; + top: calc(50% - 24px/2); + width: 2.4rem; + height: 2.4rem; + } + } + } + } + } +} diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx new file mode 100644 index 000000000..2e66dfc83 --- /dev/null +++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx @@ -0,0 +1,67 @@ +import classNames from 'classnames'; +import { useEffect, useState } from 'react'; +import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'; +import s from './MenuSort.module.scss'; + +interface Props { + children?: any, + heading:string, + type:string, + onChangeValue?: (value: Object) => void +} +const SORT = [ + { + name: 'By Name', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=by-name`, + }, + { + name: 'Price(High to Low)', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=high-to-low`, + }, + { + name: 'Price (Low to High)', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=low-to-high`, + }, + { + name: 'On Sale', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=on-sale`, + }, + ]; + + +const MenuSort = ({heading,type,onChangeValue}:Props)=> { + const [active, setActive] = useState(''); + + function handleClick(link:string){ + setActive(link); + + if(active === link){ + setActive(''); + } + } + + useEffect(()=>{ + + let href = active?.split("="); + const linkValue = href[1]; + + onChangeValue && onChangeValue({[type]:linkValue}); + },[active]) + + return ( +
      +

      {heading}

      +
        + { + SORT.map(item =>
      • +
        handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}> + {item.name} +
        +
        • ) + } +
      +
      + ) +} + +export default MenuSort From 9b669335ca470f364f4d0cad1b0aecce4d7e272c Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 09:10:02 +0700 Subject: [PATCH 10/61] :art: styles: list product with info component :%s --- pages/404.tsx | 21 -------- pages/demo.tsx | 3 +- pages/product/[slug].tsx | 3 +- .../InfoProducts/InfoProducts.module.scss | 5 ++ .../InfoProducts/InfoProducts.tsx | 18 +++++-- .../ListProductWithInfo.module.scss | 11 ++++ .../ListProductWithInfo.tsx | 51 +++++++++++++++++++ .../ViewedProducts/ViewedProducts.tsx | 15 ++++++ .../modules/product-detail/index.ts | 1 + 9 files changed, 99 insertions(+), 29 deletions(-) create mode 100644 src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss create mode 100644 src/components/common/ListProductWithInfo/ListProductWithInfo.tsx create mode 100644 src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx diff --git a/pages/404.tsx b/pages/404.tsx index 38a01bcc4..7fb30b9de 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -1,25 +1,4 @@ -import type { GetStaticPropsContext } from 'next' -import commerce from '@lib/api/commerce' import { Layout } from '@components/common' - -export async function getStaticProps({ - preview, - locale, - locales, -}: GetStaticPropsContext) { - const config = { locale, locales } - const { pages } = await commerce.getAllPages({ config, preview }) - const { categories, brands } = await commerce.getSiteInfo({ config, preview }) - return { - props: { - pages, - categories, - brands, - }, - revalidate: 200, - } -} - export default function NotFound() { return (
      diff --git a/pages/demo.tsx b/pages/demo.tsx index 81714a811..49238c906 100644 --- a/pages/demo.tsx +++ b/pages/demo.tsx @@ -1,5 +1,5 @@ import { Layout, RecipeDetail } from 'src/components/common'; -import { ProductInfoDetail } from 'src/components/modules/product-detail'; +import { ProductInfoDetail, ViewedProducts } from 'src/components/modules/product-detail'; import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; @@ -8,6 +8,7 @@ export default function Demo() { return <> + } diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index adf1fd8dd..b26de19bb 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -1,11 +1,10 @@ -import { Layout, RecipeDetail } from 'src/components/common' +import { Layout } from 'src/components/common' import { ProductInfoDetail } from 'src/components/modules/product-detail' export default function Slug() { return <> - } diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss index e69de29bb..9a2f2ceb7 100644 --- a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss +++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss @@ -0,0 +1,5 @@ +.infoProducts { + .top { + + } +} \ No newline at end of file diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx index 30ef3bca8..25e18252c 100644 --- a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx +++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx @@ -1,6 +1,8 @@ import React from 'react'; - - +import { ROUTE } from 'src/utils/constanst.utils'; +import HeadingCommon from '../../HeadingCommon/HeadingCommon'; +import ViewAllItem from '../../ViewAllItem/ViewAllItem'; +import s from './InfoProducts.module.scss' interface Props { title: string, subtitle?: string, @@ -8,9 +10,15 @@ interface Props { const InfoProducts = ({ title, subtitle }: Props) => { return ( -
      - InfoProducts - {title} +
      +
      + {title} +
      + {subtitle} +
      +
      + +
      ); }; diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss new file mode 100644 index 000000000..55bca8cd5 --- /dev/null +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss @@ -0,0 +1,11 @@ +@import '../../../styles/utilities'; + +.listProductWithInfo { + background-color: #F5F4F2; + @screen md { + @apply flex; + } + .productsWrap { + @apply custom-border-radius-lg; + } +} diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx new file mode 100644 index 000000000..5606a6900 --- /dev/null +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx @@ -0,0 +1,51 @@ +import { TOptionsEvents } from 'keen-slider'; +import React from 'react'; +import CarouselCommon from '../CarouselCommon/CarouselCommon'; +import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'; +import InfoProducts from './InfoProducts/InfoProducts'; +import s from './ListProductWithInfo.module.scss'; + +interface Props { + data: ProductCardProps[], + title: string, + subtitle?: string, +} +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 2, + mode: 'free', + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 3, + }, + '(min-width: 768px)': { + slidesPerView: 3, + }, + '(min-width: 1024px)': { + slidesPerView: 4, + }, + '(min-width: 1280px)': { + slidesPerView: 4, + }, + }, +} + +const ListProductWithInfo = ({ data, title, subtitle }: Props) => { + return ( +
      + +
      + + data={data} + Component={ProductCard} + itemKey={title} + option={OPTION_DEFAULT} + /> +
      +
      + ); +}; + +export default ListProductWithInfo; \ No newline at end of file diff --git a/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx new file mode 100644 index 000000000..820af402f --- /dev/null +++ b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; + +const ViewedProducts = () => { + return ( + + ); +}; + +export default ViewedProducts; \ No newline at end of file diff --git a/src/components/modules/product-detail/index.ts b/src/components/modules/product-detail/index.ts index 79dd056d0..b1a018d8a 100644 --- a/src/components/modules/product-detail/index.ts +++ b/src/components/modules/product-detail/index.ts @@ -1 +1,2 @@ export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail' +export { default as ViewedProducts } from './ViewedProducts/ViewedProducts' From e8e220c7ef5143f68df90bce3f4a2e7df6ff18aa Mon Sep 17 00:00:00 2001 From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com> Date: Mon, 6 Sep 2021 12:10:24 +0700 Subject: [PATCH 11/61] :sparkles: feat: Breadcrumb Common --- .../BreadcrumbCommon/BreadcrumbCommon.tsx | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx index a343ac55e..98feb9628 100644 --- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx @@ -10,13 +10,10 @@ interface BreadcrumbCommonProps { } const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => { - if (showHomePage) { - crumbs.unshift({link: "/", name: "Home"}); - } return (
      { - crumbs.map((crumb, i) => { + showHomePage && crumbs[0].link==="/" && crumbs.map((crumb, i) => { if (i === 0) { return ( @@ -36,6 +33,31 @@ const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) ) }) } + + { + !showHomePage && crumbs.map((crumb, i) => { + if (i === 0) { + return + } + if (i === 1) { + return ( + + ) + } + if (i === crumbs.length-1) { + return ( + + {crumb.name} + + ) + } + return ( + + + + ) + }) + }
      ) } From 9a085570c119b6d943dcbfc7176c8d492d834952 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 12:25:51 +0700 Subject: [PATCH 12/61] :art: styles: list product with info :%s --- .../ButtonCommon/ButtonCommon.module.scss | 8 +++- .../InfoProducts/InfoProducts.module.scss | 22 ++++++++- .../ListProductWithInfo.module.scss | 47 +++++++++++++++++-- .../ListProductWithInfo.tsx | 6 +-- .../ProductCard/ProductCard.module.scss | 1 + 5 files changed, 73 insertions(+), 11 deletions(-) diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss index 4cfe737de..c7b9f1ffa 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.module.scss +++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss @@ -7,6 +7,9 @@ align-items: center; padding: 1rem 2rem; @screen md { + padding: 0.8rem 1.6rem; + } + @screen lg { padding: 0.8rem 3.2rem; } &:disabled { @@ -84,11 +87,14 @@ padding: 1rem; } @screen md { - padding: 1.6rem 4.8rem; + padding: 1.6rem 3.2rem; &.onlyIcon { padding: 1.6rem; } } + @screen lg { + padding: 1.6rem 4.8rem; + } &.loading { &::before { width: 2.4rem; diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss index 9a2f2ceb7..c1cd9966e 100644 --- a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss +++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss @@ -1,5 +1,23 @@ +@import "../../../../styles/utilities"; + .infoProducts { + @apply flex justify-between items-center spacing-horizontal; + .top { - + .sub { + display: none; + } } -} \ No newline at end of file + @screen lg { + @apply block; + margin-right: 4rem; + padding: 0; + .top { + margin-bottom: 3.2rem; + .sub { + display: block; + margin-top: 0.4rem; + } + } + } +} diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss index 55bca8cd5..d2443dccc 100644 --- a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss @@ -1,11 +1,48 @@ -@import '../../../styles/utilities'; +@import "../../../styles/utilities"; .listProductWithInfo { - background-color: #F5F4F2; - @screen md { - @apply flex; + background-color: var(--background); + border-top: 1rem solid var(--gray); + border-bottom: 1rem solid var(--gray); + padding-top: 6rem; + padding-bottom: 6rem; + @screen lg { + @apply flex spacing-horizontal-left; + padding-top: 5.6rem; + padding-bottom: 5.6rem; + border: none; + background-color: #f5f4f2; } .productsWrap { - @apply custom-border-radius-lg; + @apply spacing-horizontal-left; + @screen lg { + max-width: 75%; + @apply custom-border-radius-lg bg-white; + padding: 4rem .8rem; + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem + 3rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem + 3rem); + } + } + } + } + @screen xl { + padding: 4rem 2.4rem; + max-width: 80%; + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem + 1rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem + 1rem); + } + } + } + } } } diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx index 5606a6900..66b8253d1 100644 --- a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx @@ -18,13 +18,13 @@ const OPTION_DEFAULT: TOptionsEvents = { slidesPerView: 3, }, '(min-width: 768px)': { - slidesPerView: 3, + slidesPerView: 4, }, '(min-width: 1024px)': { - slidesPerView: 4, + slidesPerView: 3, }, '(min-width: 1280px)': { - slidesPerView: 4, + slidesPerView: 4.5, }, }, } diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss index 8f9c5e73f..73be21ab1 100644 --- a/src/components/common/ProductCard/ProductCard.module.scss +++ b/src/components/common/ProductCard/ProductCard.module.scss @@ -2,6 +2,7 @@ max-width: 20.8rem; min-height: 31.8rem; padding: 1.2rem 1.2rem 0 1.2rem; + margin: auto; margin-bottom: 1px; @apply flex flex-col justify-between; &.notSell { From 97e74db4f7a6cec4b24984d733b5374425d0fc7c Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 12:26:06 +0700 Subject: [PATCH 13/61] :art: styles: remove margin left viewAllItem :%s --- src/components/common/ViewAllItem/ViewAllItem.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/ViewAllItem/ViewAllItem.module.scss b/src/components/common/ViewAllItem/ViewAllItem.module.scss index 4b8b6fe6d..b4ec26872 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.module.scss +++ b/src/components/common/ViewAllItem/ViewAllItem.module.scss @@ -4,7 +4,7 @@ display: flex; .content { color: var(--primary); - margin: 0.8rem 0.8rem 0.8rem 1.6rem; + margin: 0.8rem 0.8rem 0.8rem 0; font-weight: bold; } .vector { From 2a0e74233276966d03c07537afcff170cb85b722 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 12:26:28 +0700 Subject: [PATCH 14/61] :art: styles: add border radius card recipe :%s --- src/components/common/RecipeCard/RecipeCard.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/common/RecipeCard/RecipeCard.module.scss b/src/components/common/RecipeCard/RecipeCard.module.scss index 1fd6fd65e..19f3eb76a 100644 --- a/src/components/common/RecipeCard/RecipeCard.module.scss +++ b/src/components/common/RecipeCard/RecipeCard.module.scss @@ -6,6 +6,9 @@ width: 100%; max-height: 22rem; border-radius: 2.4rem; + img { + border-radius: 2.4rem; + } &:hover{ cursor: pointer; } From 8712ae717db6654a0e834e6b5a51535eba9e17ce Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 12:26:59 +0700 Subject: [PATCH 15/61] :art: styles: recommended recipe :%s --- pages/demo.tsx | 8 +- .../RecipeIngredient.module.scss | 5 +- .../RecommendedRecipes.module.scss | 27 ++++++ .../RecommendedRecipes/RecommendedRecipes.tsx | 51 ++++++++++ .../ReleventProducts/ReleventProducts.tsx | 15 +++ .../modules/product-detail/index.ts | 2 + src/utils/constanst.utils.ts | 1 + src/utils/demo-data.ts | 94 +++++++++++++++++++ 8 files changed, 199 insertions(+), 4 deletions(-) create mode 100644 src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss create mode 100644 src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx create mode 100644 src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx diff --git a/pages/demo.tsx b/pages/demo.tsx index 49238c906..f23c10583 100644 --- a/pages/demo.tsx +++ b/pages/demo.tsx @@ -1,13 +1,15 @@ import { Layout, RecipeDetail } from 'src/components/common'; -import { ProductInfoDetail, ViewedProducts } from 'src/components/modules/product-detail'; -import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; +import { ProductInfoDetail, ViewedProducts, ReleventProducts, RecommendedRecipes } from 'src/components/modules/product-detail'; +import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'; export default function Demo() { return <> - + + + } diff --git a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss index ba4bcd2e7..0237def44 100644 --- a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss +++ b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss @@ -1,7 +1,10 @@ @import "../../../../../styles/utilities"; .recipeIngredient { - margin: 5.6rem auto; + margin: 6rem auto; + @screen md { + margin: 5.6rem auto; + } .top { @apply flex justify-between items-center spacing-horizontal; } diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss new file mode 100644 index 000000000..d43e2d58c --- /dev/null +++ b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss @@ -0,0 +1,27 @@ +@import "../../../../styles/utilities"; + +.recommendedRecipes { + margin: 6rem auto; + @screen md { + margin: 5.6rem auto; + } + .infoProducts { + @apply flex justify-between items-center spacing-horizontal; + margin-bottom: 3.2rem; + } + .productsWrap { + @apply spacing-horizontal-left; + @screen xl { + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem - 2rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem - 2rem); + } + } + } + } + } +} diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx new file mode 100644 index 000000000..34950fbab --- /dev/null +++ b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx @@ -0,0 +1,51 @@ +import { TOptionsEvents } from 'keen-slider'; +import React from 'react'; +import { CarouselCommon, HeadingCommon, RecipeCard, ViewAllItem } from 'src/components/common'; +import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'; +import { ROUTE } from 'src/utils/constanst.utils'; +import s from './RecommendedRecipes.module.scss'; + +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 1.25, + mode: 'free', + spacing: 24, + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 2, + }, + '(min-width: 1024px)': { + slidesPerView: 2.5, + }, + '(min-width: 1440px)': { + slidesPerView: 3, + }, + '(min-width: 1536px)': { + slidesPerView: 3.5, + }, + }, +} + +interface Props { + data: RecipeCardProps[], +} + +const RecommendedRecipes = ({ data }: Props) => { + return ( +
      +
      + Recommended Recipes + +
      +
      + + data={data} + Component={RecipeCard} + itemKey="Recommended Recipes" + option={OPTION_DEFAULT} + /> +
      +
      + ); +}; + +export default RecommendedRecipes; \ No newline at end of file diff --git a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx new file mode 100644 index 000000000..e11d31065 --- /dev/null +++ b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; + +const ReleventProducts = () => { + return ( + + ); +}; + +export default ReleventProducts; \ No newline at end of file diff --git a/src/components/modules/product-detail/index.ts b/src/components/modules/product-detail/index.ts index b1a018d8a..ef4461432 100644 --- a/src/components/modules/product-detail/index.ts +++ b/src/components/modules/product-detail/index.ts @@ -1,2 +1,4 @@ export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail' export { default as ViewedProducts } from './ViewedProducts/ViewedProducts' +export { default as ReleventProducts } from './ReleventProducts/ReleventProducts' +export { default as RecommendedRecipes } from './RecommendedRecipes/RecommendedRecipes' diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index c7002a730..c732f6ed6 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -10,6 +10,7 @@ export const ROUTE = { PRODUCTS: '/products', ABOUT: '/about', ACCOUNT: '/account', + RECIPES: '/recipes', BUSSINESS: '/bussiness', CONTACT: '/contact', diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts index 6521f0aa6..b22668e15 100644 --- a/src/utils/demo-data.ts +++ b/src/utils/demo-data.ts @@ -1,4 +1,65 @@ +import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard" + export const PRODUCT_DATA_TEST = [ + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + }, + { + name: 'Carrot', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png", + }, + { + name: 'Salad', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png", + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646224-d22dc2e4-6ae8-4bbe-adcf-491ce191f09b.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646225-2728f192-481b-4142-99b0-dde92f53c6c6.png", + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png", + }, +] + +export const INGREDIENT_DATA_TEST = [ { name: 'Tomato', weight: '250g', @@ -57,4 +118,37 @@ export const PRODUCT_DATA_TEST = [ price: 'Rp 27.500', imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png", }, +] + +export const RECIPE_DATA_TEST: RecipeCardProps[] = [ + { + title: "Special Recipe of Vietnamese Phở", + description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png' + }, + { + title: "Original Recipe of Curry", + description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png' + }, + { + title: "The Best Recipe of Beef Noodle Soup", + description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png' + }, + { + title: "Special Recipe of Vietnamese Phở", + description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png' + }, + { + title: "Original Recipe of Curry", + description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png' + }, + { + title: "The Best Recipe of Beef Noodle Soup", + description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png' + }, ] \ No newline at end of file From 31d0ec1331f26c8c71914f2076a9c55c14f480cc Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 12:48:47 +0700 Subject: [PATCH 16/61] :art: styles: product detail page :%s --- pages/[...pages].tsx | 86 ------------------- pages/cart.tsx | 50 ----------- .../RecipeDetailInfo.module.scss | 1 - .../RecipeIngredient.module.scss | 4 +- .../ProductInfoDetail.module.scss | 3 +- .../components/ProductInfo/ProductInfo.tsx | 5 +- src/utils/language.utils.ts | 3 +- 7 files changed, 9 insertions(+), 143 deletions(-) delete mode 100644 pages/[...pages].tsx delete mode 100644 pages/cart.tsx diff --git a/pages/[...pages].tsx b/pages/[...pages].tsx deleted file mode 100644 index a8a24b3aa..000000000 --- a/pages/[...pages].tsx +++ /dev/null @@ -1,86 +0,0 @@ -import type { - GetStaticPathsContext, - GetStaticPropsContext, - InferGetStaticPropsType, -} from 'next' -import commerce from '@lib/api/commerce' -import { Text } from '@components/ui' -import { Layout } from '@components/common' -import getSlug from '@lib/get-slug' -import { missingLocaleInPages } from '@lib/usage-warns' -import type { Page } from '@commerce/types/page' -import { useRouter } from 'next/router' - -export async function getStaticProps({ - preview, - params, - locale, - locales, -}: GetStaticPropsContext<{ pages: string[] }>) { - const config = { locale, locales } - const pagesPromise = commerce.getAllPages({ config, preview }) - const siteInfoPromise = commerce.getSiteInfo({ config, preview }) - const { pages } = await pagesPromise - const { categories } = await siteInfoPromise - const path = params?.pages.join('/') - const slug = locale ? `${locale}/${path}` : path - const pageItem = pages.find((p: Page) => - p.url ? getSlug(p.url) === slug : false - ) - const data = - pageItem && - (await commerce.getPage({ - variables: { id: pageItem.id! }, - config, - preview, - })) - - const page = data?.page - - if (!page) { - // We throw to make sure this fails at build time as this is never expected to happen - throw new Error(`Page with slug '${slug}' not found`) - } - - return { - props: { pages, page, categories }, - revalidate: 60 * 60, // Every hour - } -} - -export async function getStaticPaths({ locales }: GetStaticPathsContext) { - const config = { locales } - const { pages }: { pages: Page[] } = await commerce.getAllPages({ config }) - const [invalidPaths, log] = missingLocaleInPages() - const paths = pages - .map((page) => page.url) - .filter((url) => { - if (!url || !locales) return url - // If there are locales, only include the pages that include one of the available locales - if (locales.includes(getSlug(url).split('/')[0])) return url - - invalidPaths.push(url) - }) - log() - - return { - paths, - fallback: 'blocking', - } -} - -export default function Pages({ - page, -}: InferGetStaticPropsType) { - const router = useRouter() - - return router.isFallback ? ( -

      Loading...

      // TODO (BC) Add Skeleton Views - ) : ( -
      - {page?.body && } -
      - ) -} - -Pages.Layout = Layout diff --git a/pages/cart.tsx b/pages/cart.tsx deleted file mode 100644 index b9659d21b..000000000 --- a/pages/cart.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import type { GetStaticPropsContext } from 'next' -import commerce from '@lib/api/commerce' -import { Layout } from '@components/common' -// import useCart from '@framework/cart/use-cart' -// import usePrice from '@framework/product/use-price' -// import { Button, Text } from '@components/ui' -// import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons' -// import { CartItem } from '@components/cart' - -export async function getStaticProps({ - preview, - locale, - locales, -}: GetStaticPropsContext) { - const config = { locale, locales } - const pagesPromise = commerce.getAllPages({ config, preview }) - const siteInfoPromise = commerce.getSiteInfo({ config, preview }) - const { pages } = await pagesPromise - const { categories } = await siteInfoPromise - return { - props: { pages, categories }, - } -} - -export default function Cart() { - // const error = null - // const success = null - // const { data, isLoading, isEmpty } = useCart() - - // const { price: subTotal } = usePrice( - // data && { - // amount: Number(data.subtotalPrice), - // currencyCode: data.currency.code, - // } - // ) - // const { price: total } = usePrice( - // data && { - // amount: Number(data.totalPrice), - // currencyCode: data.currency.code, - // } - // ) - - return ( -
      - This is cart page -
      - ) -} - -Cart.Layout = Layout diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss index 0262705b1..86b525083 100644 --- a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss +++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss @@ -8,7 +8,6 @@ } .img { width: fit-content; - margin: auto; margin-top: 0; @screen sm-only { diff --git a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss index 0237def44..b1419699d 100644 --- a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss +++ b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss @@ -1,9 +1,9 @@ @import "../../../../../styles/utilities"; .recipeIngredient { - margin: 6rem auto; + padding: 6rem 0; @screen md { - margin: 5.6rem auto; + padding: 5.6rem 0; } .top { @apply flex justify-between items-center spacing-horizontal; diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss index f9b621b82..645ff7259 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss @@ -2,8 +2,9 @@ .productInfoDetail { @apply spacing-horizontal; - margin: 0 auto 4rem; + padding-bottom: 4rem; @screen md { @apply flex; + padding-bottom: 5.6rem; } } \ No newline at end of file diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx index 25fea44aa..859e8a032 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -29,13 +29,14 @@ const ProductInfo = ({ }: Props) => {
      - {LANGUAGE.BUTTON_LABEL.BUY_NOW} + {LANGUAGE.BUTTON_LABEL.PREORDER} + {/* {LANGUAGE.BUTTON_LABEL.BUY_NOW} {LANGUAGE.BUTTON_LABEL.ADD_TO_CARD} - + */}
    diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts index cb7760943..191215aaa 100644 --- a/src/utils/language.utils.ts +++ b/src/utils/language.utils.ts @@ -2,7 +2,8 @@ export const LANGUAGE = { BUTTON_LABEL: { BUY_NOW: 'Buy now', SHOP_NOW: 'Shop now', - ADD_TO_CARD: 'Add to Cart' + ADD_TO_CARD: 'Add to Cart', + PREORDER: 'Pre-Order Now', }, PLACE_HOLDER: { SEARCH: 'Search', From c78ce4a073130ce93a04f10ff7aaa2ae909942ea Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 12:50:38 +0700 Subject: [PATCH 17/61] :art: styles: hide btn preorder :%s --- .../components/ProductInfo/ProductInfo.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx index 859e8a032..4abb62568 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -29,14 +29,14 @@ const ProductInfo = ({ }: Props) => {
    - {LANGUAGE.BUTTON_LABEL.PREORDER} - {/* {LANGUAGE.BUTTON_LABEL.BUY_NOW} + {/* {LANGUAGE.BUTTON_LABEL.PREORDER} */} + {LANGUAGE.BUTTON_LABEL.BUY_NOW} {LANGUAGE.BUTTON_LABEL.ADD_TO_CARD} - */} +
    From 7b5e7af8f9f48b179a4734e4bbec8cf3e80027cf Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 12:55:49 +0700 Subject: [PATCH 18/61] :art: styles: page product detail :%s --- pages/product/[slug].tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index b26de19bb..c34394af5 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -1,10 +1,15 @@ -import { Layout } from 'src/components/common' -import { ProductInfoDetail } from 'src/components/modules/product-detail' +import { Layout, RecipeDetail } from 'src/components/common' +import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail' +import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data' export default function Slug() { return <> - + + + + + } From 0e12b716c7d407114803c76d62b9d65cd31eaebb Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 6 Sep 2021 13:13:44 +0700 Subject: [PATCH 19/61] pull common --- pages/demo.tsx | 17 ++ .../ImgWithLink/ImgWithLink.module.scss | 4 + .../common/ImgWithLink/ImgWithLink.tsx | 16 ++ .../InfoProducts/InfoProducts.module.scss | 23 +++ .../InfoProducts/InfoProducts.tsx | 26 +++ .../ListProductWithInfo.module.scss | 48 ++++++ .../ListProductWithInfo.tsx | 51 ++++++ .../ProductNotSell/ProductNotSell.module.scss | 27 +++ .../ProductNotSell/ProductNotSell.tsx | 28 ++++ .../RecipeDetail/RecipeDetail.module.scss | 0 .../common/RecipeDetail/RecipeDetail.tsx | 23 +++ .../RecipeBriefInfo.module.scss | 19 +++ .../RecipeBriefInfo/RecipeBriefInfo.tsx | 29 ++++ .../RecipeDetailInfo.module.scss | 61 +++++++ .../RecipeDetailInfo/RecipeDetailInfo.tsx | 59 +++++++ .../RecipeIngredient.module.scss | 21 +++ .../RecipeIngredient/RecipeIngredient.tsx | 33 ++++ src/components/hooks/index.ts | 1 + src/components/icons/IconLocation.tsx | 11 ++ src/components/icons/IconPeople.tsx | 11 ++ src/components/icons/IconTime.tsx | 11 ++ .../ProductInfoDetail.module.scss | 10 ++ .../ProductInfoDetail/ProductInfoDetail.tsx | 20 +++ .../ProductImgs/ProductImgs.module.scss | 9 + .../components/ProductImgs/ProductImgs.tsx | 40 +++++ .../ProductInfo/ProductInfo.module.scss | 81 +++++++++ .../components/ProductInfo/ProductInfo.tsx | 46 ++++++ .../RecommendedRecipes.module.scss | 27 +++ .../RecommendedRecipes/RecommendedRecipes.tsx | 51 ++++++ .../ReleventProducts/ReleventProducts.tsx | 15 ++ .../ViewedProducts/ViewedProducts.tsx | 15 ++ .../modules/product-detail/index.ts | 4 + src/utils/demo-data.ts | 154 ++++++++++++++++++ 33 files changed, 991 insertions(+) create mode 100644 pages/demo.tsx create mode 100644 src/components/common/ImgWithLink/ImgWithLink.module.scss create mode 100644 src/components/common/ImgWithLink/ImgWithLink.tsx create mode 100644 src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss create mode 100644 src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx create mode 100644 src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss create mode 100644 src/components/common/ListProductWithInfo/ListProductWithInfo.tsx create mode 100644 src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss create mode 100644 src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx create mode 100644 src/components/common/RecipeDetail/RecipeDetail.module.scss create mode 100644 src/components/common/RecipeDetail/RecipeDetail.tsx create mode 100644 src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss create mode 100644 src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx create mode 100644 src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss create mode 100644 src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx create mode 100644 src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss create mode 100644 src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx create mode 100644 src/components/hooks/index.ts create mode 100644 src/components/icons/IconLocation.tsx create mode 100644 src/components/icons/IconPeople.tsx create mode 100644 src/components/icons/IconTime.tsx create mode 100644 src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx create mode 100644 src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss create mode 100644 src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx create mode 100644 src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx create mode 100644 src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx create mode 100644 src/components/modules/product-detail/index.ts create mode 100644 src/utils/demo-data.ts diff --git a/pages/demo.tsx b/pages/demo.tsx new file mode 100644 index 000000000..f23c10583 --- /dev/null +++ b/pages/demo.tsx @@ -0,0 +1,17 @@ +import { Layout, RecipeDetail } from 'src/components/common'; +import { ProductInfoDetail, ViewedProducts, ReleventProducts, RecommendedRecipes } from 'src/components/modules/product-detail'; +import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'; + + + +export default function Demo() { + return <> + + + + + + +} + +Demo.Layout = Layout diff --git a/src/components/common/ImgWithLink/ImgWithLink.module.scss b/src/components/common/ImgWithLink/ImgWithLink.module.scss new file mode 100644 index 000000000..b1587bfa6 --- /dev/null +++ b/src/components/common/ImgWithLink/ImgWithLink.module.scss @@ -0,0 +1,4 @@ +.imgWithLink { + @apply w-full h-full; + object-fit: cover; +} diff --git a/src/components/common/ImgWithLink/ImgWithLink.tsx b/src/components/common/ImgWithLink/ImgWithLink.tsx new file mode 100644 index 000000000..43ac1caa6 --- /dev/null +++ b/src/components/common/ImgWithLink/ImgWithLink.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import s from './ImgWithLink.module.scss' + +export interface ImgWithLinkProps { + src: string, + alt?: string, +} + +const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => { + return ( + {alt} + + ) +} + +export default ImgWithLink \ No newline at end of file diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss new file mode 100644 index 000000000..c1cd9966e --- /dev/null +++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss @@ -0,0 +1,23 @@ +@import "../../../../styles/utilities"; + +.infoProducts { + @apply flex justify-between items-center spacing-horizontal; + + .top { + .sub { + display: none; + } + } + @screen lg { + @apply block; + margin-right: 4rem; + padding: 0; + .top { + margin-bottom: 3.2rem; + .sub { + display: block; + margin-top: 0.4rem; + } + } + } +} diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx new file mode 100644 index 000000000..25e18252c --- /dev/null +++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { ROUTE } from 'src/utils/constanst.utils'; +import HeadingCommon from '../../HeadingCommon/HeadingCommon'; +import ViewAllItem from '../../ViewAllItem/ViewAllItem'; +import s from './InfoProducts.module.scss' +interface Props { + title: string, + subtitle?: string, +} + +const InfoProducts = ({ title, subtitle }: Props) => { + return ( +
    +
    + {title} +
    + {subtitle} +
    +
    + + +
    + ); +}; + +export default InfoProducts; \ No newline at end of file diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss new file mode 100644 index 000000000..d2443dccc --- /dev/null +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss @@ -0,0 +1,48 @@ +@import "../../../styles/utilities"; + +.listProductWithInfo { + background-color: var(--background); + border-top: 1rem solid var(--gray); + border-bottom: 1rem solid var(--gray); + padding-top: 6rem; + padding-bottom: 6rem; + @screen lg { + @apply flex spacing-horizontal-left; + padding-top: 5.6rem; + padding-bottom: 5.6rem; + border: none; + background-color: #f5f4f2; + } + .productsWrap { + @apply spacing-horizontal-left; + @screen lg { + max-width: 75%; + @apply custom-border-radius-lg bg-white; + padding: 4rem .8rem; + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem + 3rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem + 3rem); + } + } + } + } + @screen xl { + padding: 4rem 2.4rem; + max-width: 80%; + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem + 1rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem + 1rem); + } + } + } + } + } +} diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx new file mode 100644 index 000000000..66b8253d1 --- /dev/null +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx @@ -0,0 +1,51 @@ +import { TOptionsEvents } from 'keen-slider'; +import React from 'react'; +import CarouselCommon from '../CarouselCommon/CarouselCommon'; +import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'; +import InfoProducts from './InfoProducts/InfoProducts'; +import s from './ListProductWithInfo.module.scss'; + +interface Props { + data: ProductCardProps[], + title: string, + subtitle?: string, +} +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 2, + mode: 'free', + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 3, + }, + '(min-width: 768px)': { + slidesPerView: 4, + }, + '(min-width: 1024px)': { + slidesPerView: 3, + }, + '(min-width: 1280px)': { + slidesPerView: 4.5, + }, + }, +} + +const ListProductWithInfo = ({ data, title, subtitle }: Props) => { + return ( +
    + +
    + + data={data} + Component={ProductCard} + itemKey={title} + option={OPTION_DEFAULT} + /> +
    +
    + ); +}; + +export default ListProductWithInfo; \ No newline at end of file diff --git a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss new file mode 100644 index 000000000..4945220a9 --- /dev/null +++ b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss @@ -0,0 +1,27 @@ +@import "../../../../styles/utilities"; + +.imgWrap { + img { + opacity: 0.5; + } +} + +.name { + @apply text-label cursor-default font-bold; +} + +.info { + @apply flex justify-center items-center custom-border-radius bg-info-light text-center; + padding: .8rem 1.6rem; + margin-top: 1.6rem; + color: var(--info); + svg { + @apply u-icon; + path { + fill: currentColor; + } + } + .text { + margin-left: 0.8rem; + } +} diff --git a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx new file mode 100644 index 000000000..f87d87c43 --- /dev/null +++ b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { IconInfo } from 'src/components/icons'; +import ImgWithLink from '../../ImgWithLink/ImgWithLink'; +import s from './ProductNotSell.module.scss'; + +export interface Props { + name: string, + imageSrc: string, +} + +const ProductNotSell = ({ name, imageSrc }: Props) => { + return ( + <> +
    + +
    +
    {name}
    +
    + +
    + Not Sell +
    +
    + + ); +}; + +export default ProductNotSell; \ No newline at end of file diff --git a/src/components/common/RecipeDetail/RecipeDetail.module.scss b/src/components/common/RecipeDetail/RecipeDetail.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/common/RecipeDetail/RecipeDetail.tsx b/src/components/common/RecipeDetail/RecipeDetail.tsx new file mode 100644 index 000000000..cdec99994 --- /dev/null +++ b/src/components/common/RecipeDetail/RecipeDetail.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { ProductCardProps } from '../ProductCard/ProductCard' +import RecipeDetailInfo from './components/RecipeDetailInfo/RecipeDetailInfo' +import RecipeIngredient from './components/RecipeIngredient/RecipeIngredient' +import s from './RecipeDetail.module.scss' + + +interface Props { + className?: string + children?: any, + ingredients: ProductCardProps[], +} + +const RecipeDetail = ({ ingredients }: Props) => { + return ( +
    + + +
    + ) +} + +export default RecipeDetail diff --git a/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss new file mode 100644 index 000000000..56f1e6500 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss @@ -0,0 +1,19 @@ +.recipeBriefInfo { + @apply flex; + .item { + @apply flex; + &:not(:last-child) { + margin-right: 2.4rem; + } + svg { + width: 2rem; + height: 2rem; + path { + fill: var(--text-label); + } + } + .content { + margin-left: 0.8rem; + } + } +} diff --git a/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx new file mode 100644 index 000000000..d06387914 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { IconLocation, IconPeople, IconTime } from 'src/components/icons' +import s from './RecipeBriefInfo.module.scss' + +interface Props { + className?: string + children?: any, +} + +const RecipeBriefInfo = ({ }: Props) => { + return ( +
    +
    + +
    15 minutes
    +
    +
    + +
    4 People
    +
    +
    + +
    15 minutes
    +
    +
    + ) +} + +export default RecipeBriefInfo diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss new file mode 100644 index 000000000..86b525083 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss @@ -0,0 +1,61 @@ +@import "../../../../../styles/utilities"; + +.recipeDetailInfo { + @apply spacing-horizontal; + margin: 5.6rem auto; + @screen md { + @apply flex; + } + .img { + width: fit-content; + margin-top: 0; + + @screen sm-only { + margin-bottom: 2rem; + } + @screen lg { + max-width: 60rem; + } + img { + @apply w-full; + object-fit: contain; + max-height: 64rem; + border-radius: 2.4rem; + @screen md { + max-height: 90rem; + } + } + } + + .recipeInfo { + @screen md { + max-width: 39rem; + margin-left: 4.8rem; + } + @screen lg { + margin-left: 11.2rem; + } + .top { + margin-bottom: 4.8rem; + .name { + @apply heading-1 font-heading; + margin-bottom: 1.6rem; + } + } + .detail { + .item { + &:not(:last-child) { + margin-bottom: 2.4rem; + } + .heading { + @apply heading-3 font-heading; + margin-bottom: 0.8rem; + } + .content { + list-style: disc; + margin-left: 2rem; + } + } + } + } +} diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx new file mode 100644 index 000000000..4d212e10a --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import RecipeBriefInfo from '../RecipeBriefInfo/RecipeBriefInfo' +import s from './RecipeDetailInfo.module.scss' + + +interface Props { + className?: string + children?: any +} + +const RecipeDetailInfo = ({ }: Props) => { + return ( +
    +
    + Recipe +
    +
    +
    +

    + Crispy Fried Calamari +

    + +
    +
    +
    +

    Ingredients

    +
      +
    • Canola oil for frying
      • +
    • 1 pound clean squid bodies cut in 1/4 inch rings and dried with a paper towel
      • +
    • 2 cups flour
      • +
    • 1/2 teaspoon kosher salt
      • +
    • 1/2 teaspoon garlic powder
      • +
    • 1/8 teaspoon coarse ground black pepper
      • +
    • 1 lemon cut into wedges
      • +
    +
    + +
    +

    Preparation

    +
      +
    • 1In a large pot or dutch oven add three inches of oil and bring to 350 degrees.
      • +
    • Add the flour, salt, garlic powder and pepper to a large bowl and stir to combine.
      • +
    • Toss the squid pieces in the flour then into the hot oil.
      • +
    • Fry the squid for 1-2 minutes. You want the color to stay pale like in the pictures.
      • +
    • Remove to a cookie sheet to drain (do not add paper towels as it will steam the calamari and make it soft.)
      • +
    • Serve with lemon wedges.
      • +
    +
    + +
    +
    +
    + ) +} + +export default RecipeDetailInfo diff --git a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss new file mode 100644 index 000000000..b1419699d --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss @@ -0,0 +1,21 @@ +@import "../../../../../styles/utilities"; + +.recipeIngredient { + padding: 6rem 0; + @screen md { + padding: 5.6rem 0; + } + .top { + @apply flex justify-between items-center spacing-horizontal; + } + .bottom { + @apply flex justify-center items-center spacing-horizontal; + margin-top: 4rem; + button { + width: 100%; + @screen md { + width: 39rem; + } + } + } +} diff --git a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx new file mode 100644 index 000000000..a879f0b72 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import ButtonCommon from 'src/components/common/ButtonCommon/ButtonCommon' +import HeadingCommon from 'src/components/common/HeadingCommon/HeadingCommon' +import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard' +import ProductCarousel from 'src/components/common/ProductCarousel/ProductCarousel' +import ViewAllItem from 'src/components/common/ViewAllItem/ViewAllItem' +import { ROUTE } from 'src/utils/constanst.utils' +import s from './RecipeIngredient.module.scss' + +interface Props { + className?: string + children?: any, + data: ProductCardProps[], +} + +const RecipeIngredient = ({ data }: Props) => { + return ( +
    +
    + Ingredients +
    + +
    +
    + +
    + Buy all +
    +
    + ) +} + +export default RecipeIngredient diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts new file mode 100644 index 000000000..cf83feb42 --- /dev/null +++ b/src/components/hooks/index.ts @@ -0,0 +1 @@ +export { default as useModalCommon } from './useModalCommon' diff --git a/src/components/icons/IconLocation.tsx b/src/components/icons/IconLocation.tsx new file mode 100644 index 000000000..3dc0a81b9 --- /dev/null +++ b/src/components/icons/IconLocation.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconLocation = () => { + return ( + + + + ) +} + +export default IconLocation diff --git a/src/components/icons/IconPeople.tsx b/src/components/icons/IconPeople.tsx new file mode 100644 index 000000000..0075b0f75 --- /dev/null +++ b/src/components/icons/IconPeople.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconPeople = () => { + return ( + + + + ) +} + +export default IconPeople diff --git a/src/components/icons/IconTime.tsx b/src/components/icons/IconTime.tsx new file mode 100644 index 000000000..81064df9d --- /dev/null +++ b/src/components/icons/IconTime.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconTime = () => { + return ( + + + + ) +} + +export default IconTime diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss new file mode 100644 index 000000000..645ff7259 --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss @@ -0,0 +1,10 @@ +@import '../../../../styles/utilities'; + +.productInfoDetail { + @apply spacing-horizontal; + padding-bottom: 4rem; + @screen md { + @apply flex; + padding-bottom: 5.6rem; + } +} \ No newline at end of file diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx new file mode 100644 index 000000000..d1047bd3a --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import ProductImgs from './components/ProductImgs/ProductImgs' +import ProductInfo from './components/ProductInfo/ProductInfo' +import s from './ProductInfoDetail.module.scss' + +interface Props { + className?: string + children?: any +} + +const ProductInfoDetail = ({ }: Props) => { + return ( +
    + + +
    + ) +} + +export default ProductInfoDetail diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss new file mode 100644 index 000000000..a10eb5865 --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss @@ -0,0 +1,9 @@ +.productImgs { + @apply w-full flex justify-between items-center; + @screen sm-only { + margin-bottom: 2rem; + } + @screen lg { + max-width: 60rem; + } +} diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx new file mode 100644 index 000000000..325c6b453 --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import { CarouselCommon, ImgWithLink } from 'src/components/common' +import { ImgWithLinkProps } from 'src/components/common/ImgWithLink/ImgWithLink' +import s from './ProductImgs.module.scss' + +interface Props { + className?: string + children?: any, +} + +const DATA = [ + { + src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png', + alt: 'Broccoli', + }, + { + src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png', + alt: 'Broccoli', + } +] + +const option = { + slidesPerView: 1, +} + +const ProductImgs = ({ }: Props) => { + return ( +
    + + data={DATA} + itemKey="product-detail-img" + Component={ImgWithLink} + option={option} + isDot={true} + /> +
    + ) +} + +export default ProductImgs diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss new file mode 100644 index 000000000..403782c51 --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss @@ -0,0 +1,81 @@ +@import "../../../../../../styles/utilities"; + +.productInfo { + @screen md { + max-width: 39rem; + margin-left: 4.8rem; + } + @screen lg { + margin-left: 11.2rem; + } + .info { + margin-bottom: 3.2rem; + .heading { + @apply heading-2 font-heading; + margin-top: 0.8rem; + } + .price { + margin-top: 0.8rem; + .old { + margin-bottom: 0.8rem; + .number { + margin-right: 0.8rem; + color: var(--text-label); + text-decoration: line-through; + } + } + .current { + @apply text-active font-bold sm-headline; + } + } + .description { + margin-top: 0.8rem; + } + } + .actions { + @screen sm-only { + @apply fixed flex justify-between items-center bg-white w-full; + z-index: 10000; + bottom: 0; + left: 0; + padding: 2rem; + } + } + .bottom { + @screen sm-only { + @apply flex justify-between items-center flex-row-reverse; + margin-left: 1rem; + flex: 1; + button { + &:first-child { + min-width: 13rem; + } + &:nth-child(n + 1) { + margin-left: 0.8rem; + } + } + } + .buttonWithIcon { + @apply flex items-center; + .label { + @apply hidden; + @screen md { + @apply inline-block; + margin-left: 0.8rem; + } + } + } + button { + @apply w-full; + } + + @screen md { + margin-top: 2.4rem; + button { + &:first-child { + margin-bottom: 0.8rem; + } + } + } + } +} diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx new file mode 100644 index 000000000..4abb62568 --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -0,0 +1,46 @@ +import React from 'react' +import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common' +import { IconBuy } from 'src/components/icons' +import { LANGUAGE } from 'src/utils/language.utils' +import s from './ProductInfo.module.scss' + +interface Props { + className?: string + children?: any, +} + +const ProductInfo = ({ }: Props) => { + return ( +
    +
    + SEAFOOD +

    SeaPAk

    +
    +
    + Rp 32.000 + -15% +
    +
    Rp 27.500
    +
    +
    + In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley +
    +
    +
    + +
    + {/* {LANGUAGE.BUTTON_LABEL.PREORDER} */} + {LANGUAGE.BUTTON_LABEL.BUY_NOW} + + + + {LANGUAGE.BUTTON_LABEL.ADD_TO_CARD} + + +
    +
    +
    + ) +} + +export default ProductInfo diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss new file mode 100644 index 000000000..d43e2d58c --- /dev/null +++ b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss @@ -0,0 +1,27 @@ +@import "../../../../styles/utilities"; + +.recommendedRecipes { + margin: 6rem auto; + @screen md { + margin: 5.6rem auto; + } + .infoProducts { + @apply flex justify-between items-center spacing-horizontal; + margin-bottom: 3.2rem; + } + .productsWrap { + @apply spacing-horizontal-left; + @screen xl { + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem - 2rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem - 2rem); + } + } + } + } + } +} diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx new file mode 100644 index 000000000..34950fbab --- /dev/null +++ b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx @@ -0,0 +1,51 @@ +import { TOptionsEvents } from 'keen-slider'; +import React from 'react'; +import { CarouselCommon, HeadingCommon, RecipeCard, ViewAllItem } from 'src/components/common'; +import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'; +import { ROUTE } from 'src/utils/constanst.utils'; +import s from './RecommendedRecipes.module.scss'; + +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 1.25, + mode: 'free', + spacing: 24, + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 2, + }, + '(min-width: 1024px)': { + slidesPerView: 2.5, + }, + '(min-width: 1440px)': { + slidesPerView: 3, + }, + '(min-width: 1536px)': { + slidesPerView: 3.5, + }, + }, +} + +interface Props { + data: RecipeCardProps[], +} + +const RecommendedRecipes = ({ data }: Props) => { + return ( +
    +
    + Recommended Recipes + +
    +
    + + data={data} + Component={RecipeCard} + itemKey="Recommended Recipes" + option={OPTION_DEFAULT} + /> +
    +
    + ); +}; + +export default RecommendedRecipes; \ No newline at end of file diff --git a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx new file mode 100644 index 000000000..e11d31065 --- /dev/null +++ b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; + +const ReleventProducts = () => { + return ( + + ); +}; + +export default ReleventProducts; \ No newline at end of file diff --git a/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx new file mode 100644 index 000000000..820af402f --- /dev/null +++ b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; + +const ViewedProducts = () => { + return ( + + ); +}; + +export default ViewedProducts; \ No newline at end of file diff --git a/src/components/modules/product-detail/index.ts b/src/components/modules/product-detail/index.ts new file mode 100644 index 000000000..ef4461432 --- /dev/null +++ b/src/components/modules/product-detail/index.ts @@ -0,0 +1,4 @@ +export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail' +export { default as ViewedProducts } from './ViewedProducts/ViewedProducts' +export { default as ReleventProducts } from './ReleventProducts/ReleventProducts' +export { default as RecommendedRecipes } from './RecommendedRecipes/RecommendedRecipes' diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts new file mode 100644 index 000000000..b22668e15 --- /dev/null +++ b/src/utils/demo-data.ts @@ -0,0 +1,154 @@ +import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard" + +export const PRODUCT_DATA_TEST = [ + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + }, + { + name: 'Carrot', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png", + }, + { + name: 'Salad', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png", + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646224-d22dc2e4-6ae8-4bbe-adcf-491ce191f09b.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646225-2728f192-481b-4142-99b0-dde92f53c6c6.png", + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png", + }, +] + +export const INGREDIENT_DATA_TEST = [ + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + isNotSell: true, + }, + { + name: 'Carrot', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png", + }, + { + name: 'Salad', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png", + isNotSell: true, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646224-d22dc2e4-6ae8-4bbe-adcf-491ce191f09b.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646225-2728f192-481b-4142-99b0-dde92f53c6c6.png", + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png", + }, +] + +export const RECIPE_DATA_TEST: RecipeCardProps[] = [ + { + title: "Special Recipe of Vietnamese Phở", + description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png' + }, + { + title: "Original Recipe of Curry", + description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png' + }, + { + title: "The Best Recipe of Beef Noodle Soup", + description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png' + }, + { + title: "Special Recipe of Vietnamese Phở", + description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png' + }, + { + title: "Original Recipe of Curry", + description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png' + }, + { + title: "The Best Recipe of Beef Noodle Soup", + description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png' + }, +] \ No newline at end of file From 432c7b403c1263806f60e0f275d23cb17d9c9c19 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 14:10:55 +0700 Subject: [PATCH 20/61] :art: styles: drawer comon :%s --- pages/demo.tsx | 12 ++--- .../DrawerCommon/DrawerCommon.module.scss | 44 +++++++++++++++++++ .../common/DrawerCommon/DrawerCommon.tsx | 36 +++++++++++++++ src/components/common/Layout/Layout.tsx | 15 +++++++ src/components/common/index.ts | 1 + src/components/icons/IconClose.tsx | 20 +++++++++ src/components/icons/index.ts | 1 + 7 files changed, 121 insertions(+), 8 deletions(-) create mode 100644 src/components/common/DrawerCommon/DrawerCommon.module.scss create mode 100644 src/components/common/DrawerCommon/DrawerCommon.tsx create mode 100644 src/components/icons/IconClose.tsx diff --git a/pages/demo.tsx b/pages/demo.tsx index f23c10583..38f91037c 100644 --- a/pages/demo.tsx +++ b/pages/demo.tsx @@ -1,16 +1,12 @@ -import { Layout, RecipeDetail } from 'src/components/common'; -import { ProductInfoDetail, ViewedProducts, ReleventProducts, RecommendedRecipes } from 'src/components/modules/product-detail'; -import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'; +import { Layout } from 'src/components/common'; export default function Demo() { return <> - - - - - + Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. } diff --git a/src/components/common/DrawerCommon/DrawerCommon.module.scss b/src/components/common/DrawerCommon/DrawerCommon.module.scss new file mode 100644 index 000000000..fc9de8a8a --- /dev/null +++ b/src/components/common/DrawerCommon/DrawerCommon.module.scss @@ -0,0 +1,44 @@ +@import "../../../styles/utilities"; + +.drawerCommon { + @apply fixed flex justify-end transition-all duration-200; + top: 0; + right: 0; + height: 100vh; + width: 90%; + box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15); + z-index: 20000; + @screen md { + width: unset; + } + + .inner { + @apply bg-white; + width: fit-content; + height: 100vh; + min-width: 48rem; + width: 100%; + margin-right: 0; + .top { + @apply flex justify-between items-center; + padding: 1.6rem; + .heading { + @apply sm-headline; + } + .iconClose { + @apply cursor-pointer transition-all duration-200; + &:hover { + svg path { + fill: var(--primary); + } + } + } + } + } + .content { + overflow-y: auto; + } + &.hide { + transform: translateX(110%); + } +} diff --git a/src/components/common/DrawerCommon/DrawerCommon.tsx b/src/components/common/DrawerCommon/DrawerCommon.tsx new file mode 100644 index 000000000..deb1af3eb --- /dev/null +++ b/src/components/common/DrawerCommon/DrawerCommon.tsx @@ -0,0 +1,36 @@ +import React, { useRef } from 'react'; +import s from './DrawerCommon.module.scss'; +import classNames from 'classnames'; +import { IconClose } from 'src/components/icons'; + +interface Props { + visible: boolean + title?: string + children?: React.ReactNode + onClose: () => void +} + +const DrawerCommon = ({ title, visible, children, onClose }: Props) => { + return ( +
    +
    +
    +

    + {title} +

    +
    + +
    +
    +
    + {children} +
    +
    +
    + ) +} + +export default DrawerCommon; \ No newline at end of file diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index aa5da11e1..e7190f404 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -1,6 +1,8 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' +import { useModalCommon } from 'src/components/hooks' +import { DrawerCommon, ScrollToTop } from '..' import Footer from '../Footer/Footer' import Header from '../Header/Header' import s from './Layout.module.scss' @@ -13,12 +15,25 @@ interface Props { // note: demo code const Layout: FC = ({ children }) => { const { locale = 'en-US' } = useRouter() + const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: true }) + const toggle = () => { + if (visibleCartDrawer) { + closeCartDrawer() + } else { + openModal() + } + } return (
    +
    {children}
    +
    diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 2c1b53b95..edbc5f0a6 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -34,3 +34,4 @@ export { default as ModalInfo} from "./ModalInfo/ModalInfo" export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo' export { default as ImgWithLink} from './ImgWithLink/ImgWithLink' export { default as RecipeDetail} from './RecipeDetail/RecipeDetail' +export { default as DrawerCommon} from './DrawerCommon/DrawerCommon' diff --git a/src/components/icons/IconClose.tsx b/src/components/icons/IconClose.tsx new file mode 100644 index 000000000..018ee8cd6 --- /dev/null +++ b/src/components/icons/IconClose.tsx @@ -0,0 +1,20 @@ +import React from 'react' + +const IconClose = () => { + return ( + + + + ) +} + +export default IconClose diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 1cdb56079..3430e52af 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -23,3 +23,4 @@ export { default as IconCheck } from './IconCheck' export { default as IconTime } from './IconTime' export { default as IconPeople } from './IconPeople' export { default as IconLocation } from './IconLocation' +export { default as IconClose } from './IconClose' From 5c0dbd9d2f4acd3a876cf9e38a03cf3eddd0edda Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 6 Sep 2021 14:18:59 +0700 Subject: [PATCH 21/61] :sparkles: feat: Scroll To Top --- .../common/ScrollToTop/ScrollTarget.tsx | 15 --------------- src/components/common/ScrollToTop/ScrollToTop.tsx | 7 +++---- 2 files changed, 3 insertions(+), 19 deletions(-) delete mode 100644 src/components/common/ScrollToTop/ScrollTarget.tsx diff --git a/src/components/common/ScrollToTop/ScrollTarget.tsx b/src/components/common/ScrollToTop/ScrollTarget.tsx deleted file mode 100644 index 50a839c83..000000000 --- a/src/components/common/ScrollToTop/ScrollTarget.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { MutableRefObject } from 'react' - -interface ScrollTargetProps { - refScrollUp: MutableRefObject; -} - -const ScrollTarget = ({ refScrollUp } : ScrollTargetProps) => { - - return ( -
    - ) - -} - -export default ScrollTarget diff --git a/src/components/common/ScrollToTop/ScrollToTop.tsx b/src/components/common/ScrollToTop/ScrollToTop.tsx index 98e16168d..d148c8937 100644 --- a/src/components/common/ScrollToTop/ScrollToTop.tsx +++ b/src/components/common/ScrollToTop/ScrollToTop.tsx @@ -5,11 +5,10 @@ import s from './ScrollToTop.module.scss' import ArrowUp from '../../icons/IconArrowUp' interface ScrollToTopProps { - target: MutableRefObject; visibilityHeight?: number; } -const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => { +const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => { const [scrollPosition, setSrollPosition] = useState(0); const [showScrollToTop, setShowScrollToTop] = useState("hide"); @@ -26,7 +25,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => { }; function handleScrollUp() { - target.current.scrollIntoView({ behavior: "smooth" }); + window.scrollTo(0, 0); } function addEventScroll() { @@ -34,7 +33,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => { } useEffect(() => { - addEventScroll() + addEventScroll(); }); return ( From e4172cf2c760d4153d8925acb56db624703c63b6 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 6 Sep 2021 14:22:34 +0700 Subject: [PATCH 22/61] update --- pages/index.tsx | 12 +++++++++--- src/components/common/index.ts | 1 - 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 88b354335..d3c21e8ed 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,17 +1,23 @@ import React, { MutableRefObject, useRef } from 'react'; -import { Banner, ButtonCommon, ButtonIconBuy, CollectionHeading, HeadingCommon, Inputcommon, InputSearch, Layout, ScrollTarget } from 'src/components/common'; +import { Banner, ButtonCommon, ButtonIconBuy, CollectionHeading, HeadingCommon, Inputcommon, InputSearch, Layout, ScrollToTop } from 'src/components/common'; import { IconBuy } from 'src/components/icons'; export default function Home() { - const refScrollUp = useRef() as MutableRefObject; return ( <> - + {/* */} + categories categories + + + + categories + +

    Go to src/components to make your awesome component!

    Go to src/styles to find global styles!

    diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 7d9290c69..d39e1bfbd 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -11,7 +11,6 @@ export { default as Inputcommon} from './InputCommon/InputCommon' export { default as HeadingCommon } from './HeadingCommon/HeadingCommon' export { default as CollectionHeading } from './CollectionHeading/CollectionHeading' export { default as ScrollToTop } from './ScrollToTop/ScrollToTop' -export { default as ScrollTarget } from './ScrollToTop/ScrollTarget' export { default as InputSearch} from './InputSearch/InputSearch' export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy' export { default as Banner} from './Banner/Banner' From 807fbff17729937e17107338b7ae0373d0b510d7 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 6 Sep 2021 14:57:43 +0700 Subject: [PATCH 23/61] feat: SelectCommon --- pages/index.tsx | 28 ++++--- .../SelectCommon/SelectCommon.module.scss | 79 +++++++++++++++---- .../common/SelectCommon/SelectCommon.tsx | 56 +++++++++---- .../SelectOption/SelectOption.module.scss | 20 +++++ .../SelectOption/SelectOption.tsx | 28 +++++++ src/components/icons/IconVectorDown.tsx | 19 +++++ src/components/icons/index.ts | 1 + 7 files changed, 193 insertions(+), 38 deletions(-) create mode 100644 src/components/common/SelectCommon/SelectOption/SelectOption.module.scss create mode 100644 src/components/common/SelectCommon/SelectOption/SelectOption.tsx create mode 100644 src/components/icons/IconVectorDown.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 1d3072ef7..e12963435 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,18 +1,28 @@ -import { Layout } from 'src/components/common' +import { Layout, SelectCommon } from 'src/components/common' import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories, HomeFeature, HomeRecipe } from 'src/components/modules/home'; +const OPTION_TEST = [ + { + name: "By Name", + value: "Name" + }, + { + name: "Price (High to Low)", + value: "Price" + }, + { + name: "On Sale", + value: "Sale" + } +] +const handleChange = (value:string) => { + console.log(value) +} export default function Home() { return ( <> - - - - - - - - + ) } diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss index dcb9120da..71aed96f0 100644 --- a/src/components/common/SelectCommon/SelectCommon.module.scss +++ b/src/components/common/SelectCommon/SelectCommon.module.scss @@ -1,32 +1,81 @@ @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; + background-color: var(--white); &.base{ - width: 18.6rem; - height: 4.8rem; + width: 20.6rem; + .selectTrigger{ + width: 20.6rem; + padding: 1.2rem 1.6rem; + } } &.large{ width: 34.25rem; - height: 5.6rem; + .selectTrigger{ + width: 34.25rem; + padding: 1.6rem 1.6rem; + } } &.default{ - @apply border; + .selectTrigger{ + @apply border-solid border border-current; + } + } + &.custom{ + .selectTrigger{ + @apply border-2; + border-color: var(--border-line); + color: var(--text-label); + } + } + &:hover{ + .hoverWrapper{ + @apply block; + animation: SelectAnimation 0.2s ease-out; + } + } +} +.selectTrigger{ + @apply outline-none flex justify-between; + color: var(--text-active); + border-radius: 0.8rem; + +} +.hoverWrapper{ + @apply hidden; + padding-top: 0.6rem; + &:hover{ + @apply block; + } +} +.selectOptionWrapper{ + @apply outline-none z-10 absolute; + border-radius: 0.8rem; + background-color: var(--white); + padding: 0.4rem 0rem 0.4rem 0rem; + &.base{ + width: 20.6rem; + } + &.large{ + width: 34.25rem; + } + &.default{ + @apply border-solid border border-current; } &.custom{ @apply border-2; border-color: var(--border-line); color: var(--text-label); } - .option{ - &:hover{ - background-color: black; - } - } } +@keyframes SelectAnimation { + 0% { + opacity: 0; + transform: translateY(1.6rem); + } + 100% { + opacity: 1; + transform: none; + } +} \ No newline at end of file diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx index 8360a700f..0eea2b2e0 100644 --- a/src/components/common/SelectCommon/SelectCommon.tsx +++ b/src/components/common/SelectCommon/SelectCommon.tsx @@ -1,26 +1,54 @@ import s from './SelectCommon.module.scss' import classNames from 'classnames' +import { useState } from 'react' +import { IconVectorDown } from 'src/components/icons' +import SelectOption from './SelectOption/SelectOption' interface Props { - placeHolder? : string, + placeholder? : string, size?: 'base' | 'large', type?: 'default' | 'custom', - option: {name: string}[], + option: {name: string, value: string}[], + onChange?: (value: string) => void, } -const SelectCommon = ({ type = 'default', size = 'base', option, placeHolder }: Props) => { +const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange }: Props) => { + const [selectedName, setSelectedName] = useState(placeholder) + + const changeSelectedName = (item:string, value: string) => { + setSelectedName(item) + onChange && onChange(value) + } return( - + <> +
    +
    {selectedName}
    +
    +
    + { + option.map(item => + + ) + } +
    +
    + +
    + ) } diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss new file mode 100644 index 000000000..fa8eec541 --- /dev/null +++ b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss @@ -0,0 +1,20 @@ +@import "../../../../styles/utilities"; + +.selectOption { + @apply outline-none; + background-color: var(--white); + &.base{ + width: 20.4rem; + padding: 0.8rem 1.6rem; + } + &.large{ + width: 33.75rem; + padding: 0.8rem 1.6rem; + } + &:hover{ + background-color: var(--gray); + } + &.isChoose{ + background-color: var(--gray); + } +} \ No newline at end of file diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.tsx b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx new file mode 100644 index 000000000..863057f1f --- /dev/null +++ b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx @@ -0,0 +1,28 @@ +import s from './SelectOption.module.scss' +import classNames from 'classnames' +import { useState } from 'react' + +interface Props{ + onClick: (name: string, value: string) => void, + itemName: string, + size: 'base' | 'large', + value: string, + selected?: boolean, +} + +const SelectOption = ({onClick, itemName, size, value, selected} : Props) => { + const changeName = () => { + onClick(itemName, value) + } + return( +
    {itemName}
    + ) +} + +export default SelectOption \ No newline at end of file diff --git a/src/components/icons/IconVectorDown.tsx b/src/components/icons/IconVectorDown.tsx new file mode 100644 index 000000000..0bb1cb8c1 --- /dev/null +++ b/src/components/icons/IconVectorDown.tsx @@ -0,0 +1,19 @@ +const IconVectorDown = ({ ...props }) => { + return ( + + + + ) + } + + export default IconVectorDown \ No newline at end of file diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 02b4947cb..58f525a3c 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -15,3 +15,4 @@ export { default as IconApple } from './IconApple' export { default as ArrowLeft } from './ArrowLeft' export { default as ArrowRight } from './ArrowRight' export { default as Close } from './Close' +export { default as IconVectorDown} from './IconVectorDown' \ No newline at end of file From fc39eb17589c9bb3449b60a5829594f04342ccfb Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 17:06:06 +0700 Subject: [PATCH 24/61] :art: styles: cart drawer :%s --- next.config.js | 4 ++ .../common/CartDrawer/CartDrawer.module.scss | 12 ++++ .../common/CartDrawer/CartDrawer.tsx | 35 +++++++++++ .../CartCheckoutButton.module.scss | 6 ++ .../CartCheckoutButton/CartCheckoutButton.tsx | 13 ++++ .../CartMessage/CartMessage.module.scss | 15 +++++ .../components/CartMessage/CartMessage.tsx | 18 ++++++ .../CartRecommendation.module.scss | 25 ++++++++ .../CartRecommendation/CartRecommendation.tsx | 43 +++++++++++++ .../ProductCartItem.module.scss | 50 +++++++++++++++ .../ProductCartItem/ProductCartItem.tsx | 56 +++++++++++++++++ .../ProductsInCart/ProductsInCart.module.scss | 5 ++ .../ProductsInCart/ProductsInCart.tsx | 28 +++++++++ .../DrawerCommon/DrawerCommon.module.scss | 7 ++- .../ImgWithLink/ImgWithLink.module.scss | 9 ++- .../common/ImgWithLink/ImgWithLink.tsx | 6 +- src/components/common/Layout/Layout.tsx | 5 +- .../ListProductWithInfo.module.scss | 2 +- src/components/common/index.ts | 1 + src/components/icons/IconDelete.tsx | 11 ++++ src/components/icons/index.ts | 1 + src/styles/_base.scss | 3 +- src/styles/_utilities.scss | 19 ++++++ src/utils/demo-data.ts | 61 +++++++++++++++++++ src/utils/types.utils.ts | 7 ++- tailwind.config.js | 1 + 26 files changed, 431 insertions(+), 12 deletions(-) create mode 100644 src/components/common/CartDrawer/CartDrawer.module.scss create mode 100644 src/components/common/CartDrawer/CartDrawer.tsx create mode 100644 src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss create mode 100644 src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx create mode 100644 src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss create mode 100644 src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx create mode 100644 src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss create mode 100644 src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx create mode 100644 src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss create mode 100644 src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx create mode 100644 src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss create mode 100644 src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx create mode 100644 src/components/icons/IconDelete.tsx diff --git a/next.config.js b/next.config.js index 515b2ae7c..d3ad64f4a 100644 --- a/next.config.js +++ b/next.config.js @@ -13,6 +13,10 @@ const isVendure = provider === 'vendure' module.exports = withCommerceConfig({ commerce, + images: { + // todo: replace domains for images + domains: ['user-images.githubusercontent.com'], + }, i18n: { locales: ['en-US', 'es'], defaultLocale: 'en-US', diff --git a/src/components/common/CartDrawer/CartDrawer.module.scss b/src/components/common/CartDrawer/CartDrawer.module.scss new file mode 100644 index 000000000..126028d3c --- /dev/null +++ b/src/components/common/CartDrawer/CartDrawer.module.scss @@ -0,0 +1,12 @@ +@import '../../../styles/utilities'; + + +.cartDrawer { + @apply flex flex-col h-full; + .body { + @apply overflow-y-auto overflow-x-hidden h-full custom-scroll; + } + .bottom { + padding-top: 1.6rem; + } +} \ No newline at end of file diff --git a/src/components/common/CartDrawer/CartDrawer.tsx b/src/components/common/CartDrawer/CartDrawer.tsx new file mode 100644 index 000000000..0a432bb65 --- /dev/null +++ b/src/components/common/CartDrawer/CartDrawer.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data'; +import { DrawerCommon } from '..'; +import s from './CartDrawer.module.scss'; +import CartCheckoutButton from './components/CartCheckoutButton/CartCheckoutButton'; +import CartMessage from './components/CartMessage/CartMessage'; +import CartRecommendation from './components/CartRecommendation/CartRecommendation'; +import ProductsInCart from './components/ProductsInCart/ProductsInCart'; + +interface Props { + visible: boolean + onClose: () => void +} + +const CartDrawer = ({ visible, onClose }: Props) => { + return ( + +
    +
    + + +
    +
    + + +
    +
    +     + ) +} + +export default CartDrawer; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss new file mode 100644 index 000000000..3f90bffbd --- /dev/null +++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss @@ -0,0 +1,6 @@ +.cartCheckoutButton { + padding: 1.6rem; + button { + width: 100%; + } +} diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx new file mode 100644 index 000000000..0cd7d00a2 --- /dev/null +++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx @@ -0,0 +1,13 @@ +import React, { memo } from 'react'; +import { ButtonCommon } from 'src/components/common'; +import s from './CartCheckoutButton.module.scss'; + +const CartCheckoutButton = memo(() => { + return ( +
    + Check out - Rp 120.500 +
    + ) +}) + +export default CartCheckoutButton; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss new file mode 100644 index 000000000..18d6f96cc --- /dev/null +++ b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss @@ -0,0 +1,15 @@ +@import "../../../../../styles/utilities"; + +.cartMessage { + @apply flex bg-info; + padding: 1.2rem 1.6rem; + .text { + font-weight: bold; + margin-right: 0.8rem; + } + .icon { + svg path { + fill: var(--text-placeholder); + } + } +} diff --git a/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx b/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx new file mode 100644 index 000000000..2cc85fb49 --- /dev/null +++ b/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx @@ -0,0 +1,18 @@ +import React, { memo } from 'react'; +import { IconInfo } from 'src/components/icons'; +import s from './CartMessage.module.scss'; + +const CartMessage = memo(() => { + return ( +
    +
    + You save - Rp 150 +
    +
    + +
    +
    + ) +}) + +export default CartMessage; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss new file mode 100644 index 000000000..5b1a5ffa6 --- /dev/null +++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss @@ -0,0 +1,25 @@ +@import '../../../../../styles/utilities'; + +.cartRecommendation { + @apply w-full bg-background-gray; + .top { + @apply flex justify-between items-center; + padding: 1.6rem; + .heading { + @apply font-bold text-active sm-headline; + } + } + .productCardWarpper { + padding-left: 1.6rem; + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem - 2rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem - 2rem); + } + } + } + } +} diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx new file mode 100644 index 000000000..bbc40647e --- /dev/null +++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx @@ -0,0 +1,43 @@ +import { TOptionsEvents } from 'keen-slider'; +import React from 'react'; +import { CarouselCommon, ViewAllItem } from 'src/components/common'; +import ProductCard, { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'; +import { ROUTE } from 'src/utils/constanst.utils'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; +import s from './CartRecommendation.module.scss'; + +const option: TOptionsEvents = { + slidesPerView: 2, + mode: 'free', + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 1, + }, + '(min-width: 768px)': { + slidesPerView: 2.5, + } + }, +} + +const CartRecommendation = () => { + return ( +
    +
    +
    + Recommendation +
    + +
    +
    + + data={PRODUCT_DATA_TEST} + Component={ProductCard} + itemKey="cart-recommendation" + option={option} + /> +
    +
    + ) +} + +export default CartRecommendation; diff --git a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss new file mode 100644 index 000000000..e8bd0e3ec --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss @@ -0,0 +1,50 @@ +@import "../../../../../styles/utilities"; + +.productCartItem { + @apply grid; + grid-template-columns: 2fr 1fr; + padding-bottom: 1.6rem; + padding-top: 1.6rem; + border-bottom: 1px solid var(--border-line); + .info { + @apply flex; + .imgWrap { + width: 11rem; + height: 7.5rem; + margin-right: 1.6rem; + img { + object-fit: contain; + } + } + .detail { + min-height: 9rem; + .price { + margin-top: 0.8rem; + .old { + margin-bottom: 0.8rem; + .number { + margin-right: 0.8rem; + color: var(--text-label); + text-decoration: line-through; + } + } + .current { + @apply text-active font-bold sm-headline; + } + } + } + } + + .actions { + @apply flex flex-col justify-between items-end; + margin-left: 1.6rem; + .iconDelete { + @apply cursor-pointer; + &:hover { + svg path { + fill: var(--negative); + } + } + } + } +} diff --git a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx new file mode 100644 index 000000000..7ec3ecbdb --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import Link from 'next/link' +import { QuanittyInput } from 'src/components/common'; +import { IconDelete } from 'src/components/icons'; +import { ROUTE } from 'src/utils/constanst.utils'; +import { ProductProps } from 'src/utils/types.utils'; +import ImgWithLink from '../../../ImgWithLink/ImgWithLink'; +import LabelCommon from '../../../LabelCommon/LabelCommon'; +import s from './ProductCartItem.module.scss'; + +export interface ProductCartItempProps extends ProductProps { + quantity: number, +} + +const ProductCartItem = ({ name, slug, weight, price, oldPrice, discount, imageSrc, quantity }: ProductCartItempProps) => { + return ( +
    +
    + + +
    + +
    +     + +
    + + +
    + {name} {weight ? `(${weight})` : ''} +
    +     + +
    + { + oldPrice && +
    + {oldPrice} + {discount} +
    + } +
    {price}
    +
    +
    +
    +
    +
    + +
    + +
    +
    + ) +} + +export default ProductCartItem; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss new file mode 100644 index 000000000..96df763b8 --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss @@ -0,0 +1,5 @@ + +.productsInCart { + padding: 1.6rem 1.6rem 0 1.6rem; + margin-bottom: -1px; +} \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx new file mode 100644 index 000000000..5eddc1c25 --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import ProductCartItem, { ProductCartItempProps } from '../ProductCartItem/ProductCartItem'; +import s from './ProductsInCart.module.scss'; + +interface Props { + data: ProductCartItempProps[] +} + +const ProductsInCart = ({ data }: Props) => { + return ( +
    + { + data.map(item => ) + } +
    + ) +} + +export default ProductsInCart; \ No newline at end of file diff --git a/src/components/common/DrawerCommon/DrawerCommon.module.scss b/src/components/common/DrawerCommon/DrawerCommon.module.scss index fc9de8a8a..18d992741 100644 --- a/src/components/common/DrawerCommon/DrawerCommon.module.scss +++ b/src/components/common/DrawerCommon/DrawerCommon.module.scss @@ -2,6 +2,7 @@ .drawerCommon { @apply fixed flex justify-end transition-all duration-200; + overflow: hidden; top: 0; right: 0; height: 100vh; @@ -13,12 +14,15 @@ } .inner { - @apply bg-white; + @apply flex flex-col bg-white; width: fit-content; height: 100vh; min-width: 48rem; width: 100%; margin-right: 0; + @screen md { + max-width: 50rem; + } .top { @apply flex justify-between items-center; padding: 1.6rem; @@ -37,6 +41,7 @@ } .content { overflow-y: auto; + height: 100%; } &.hide { transform: translateX(110%); diff --git a/src/components/common/ImgWithLink/ImgWithLink.module.scss b/src/components/common/ImgWithLink/ImgWithLink.module.scss index b1587bfa6..413f96cdb 100644 --- a/src/components/common/ImgWithLink/ImgWithLink.module.scss +++ b/src/components/common/ImgWithLink/ImgWithLink.module.scss @@ -1,4 +1,9 @@ .imgWithLink { - @apply w-full h-full; - object-fit: cover; + position: relative; + min-width: 5rem; + width: 100%; + height: 100%; + img { + object-fit: cover; + } } diff --git a/src/components/common/ImgWithLink/ImgWithLink.tsx b/src/components/common/ImgWithLink/ImgWithLink.tsx index 43ac1caa6..092322085 100644 --- a/src/components/common/ImgWithLink/ImgWithLink.tsx +++ b/src/components/common/ImgWithLink/ImgWithLink.tsx @@ -1,5 +1,6 @@ import React from 'react' import s from './ImgWithLink.module.scss' +import Image from 'next/image' export interface ImgWithLinkProps { src: string, @@ -8,8 +9,9 @@ export interface ImgWithLinkProps { const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => { return ( - {alt} - +
    + {alt} +
    ) } diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index e7190f404..ea09855ff 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' import { useModalCommon } from 'src/components/hooks' -import { DrawerCommon, ScrollToTop } from '..' +import { CartDrawer } from '..' import Footer from '../Footer/Footer' import Header from '../Header/Header' import s from './Layout.module.scss' @@ -30,8 +30,7 @@ const Layout: FC = ({ children }) => {
    {children}
    -
    diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss index d2443dccc..ddd8ed901 100644 --- a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss @@ -11,7 +11,7 @@ padding-top: 5.6rem; padding-bottom: 5.6rem; border: none; - background-color: #f5f4f2; + background-color: var(--background-gray); } .productsWrap { @apply spacing-horizontal-left; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index edbc5f0a6..e7bddb459 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -35,3 +35,4 @@ export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreate export { default as ImgWithLink} from './ImgWithLink/ImgWithLink' export { default as RecipeDetail} from './RecipeDetail/RecipeDetail' export { default as DrawerCommon} from './DrawerCommon/DrawerCommon' +export { default as CartDrawer} from './CartDrawer/CartDrawer' diff --git a/src/components/icons/IconDelete.tsx b/src/components/icons/IconDelete.tsx new file mode 100644 index 000000000..4daff3f80 --- /dev/null +++ b/src/components/icons/IconDelete.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconDelete = () => { + return ( + + + + ) +} + +export default IconDelete diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 3430e52af..fcc739706 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -24,3 +24,4 @@ export { default as IconTime } from './IconTime' export { default as IconPeople } from './IconPeople' export { default as IconLocation } from './IconLocation' export { default as IconClose } from './IconClose' +export { default as IconDelete } from './IconDelete' diff --git a/src/styles/_base.scss b/src/styles/_base.scss index e90a6434f..e8719581f 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -6,7 +6,7 @@ --primary-lightest: #effaf4; --info-dark: #00317a; - --info: #297fff; + --info: #3468B7; --info-border-line: #d6e7ff; --info-light: #ebf3ff; @@ -33,6 +33,7 @@ --disabled: #cccccc; --border-line: #ebebeb; --background: #fff; + --background-gray: #F5F4F2; --gray: #f8f8f8; --white: #fff; --background-arrow:rgba(20, 20, 20, 0.05); diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 56f9494ec..cc13ea3cf 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -120,6 +120,25 @@ font-family: var(--font-logo); } + .custom-scroll { + overflow-y: auto; + &::-webkit-scrollbar-track { + background-color: var(--background-gray); + border-radius: 10px; + } + + &::-webkit-scrollbar { + border-radius: 10px; + width: 6px; + background-color: var(--background-gray); + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: var(--primary) + } + } + .u-form { .body { > div { diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts index b22668e15..64c8128ae 100644 --- a/src/utils/demo-data.ts +++ b/src/utils/demo-data.ts @@ -3,6 +3,7 @@ import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard" export const PRODUCT_DATA_TEST = [ { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -10,6 +11,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -17,6 +19,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Carrot', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -24,6 +27,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Salad', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -31,6 +35,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -38,6 +43,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -45,6 +51,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -52,6 +59,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -59,9 +67,55 @@ export const PRODUCT_DATA_TEST = [ }, ] +export const PRODUCT_CART_DATA_TEST = [ + { + name: 'Tomato', + slug: 'tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + oldPrice: 'Rp 32.000', + discount: '15%', + quantity: 1, + }, + { + name: 'Cucumber', + slug: 'tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + oldPrice: 'Rp 32.000', + discount: '15%', + quantity: 2, + }, + { + name: 'Carrot', + slug: 'tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png", + oldPrice: 'Rp 32.000', + discount: '20%', + quantity: 3, + }, + { + name: 'Salad', + slug: 'tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png", + quantity: 1, + }, +] + export const INGREDIENT_DATA_TEST = [ { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -69,6 +123,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -77,6 +132,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Carrot', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -84,6 +140,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Salad', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -92,6 +149,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -99,6 +157,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -106,6 +165,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -113,6 +173,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts index 3d2383495..c87305f2b 100644 --- a/src/utils/types.utils.ts +++ b/src/utils/types.utils.ts @@ -1,8 +1,11 @@ export interface ProductProps { - category: string + category?: string name: string + slug: string weight: string price: string + oldPrice?: string + discount?: string imageSrc: string isNotSell?: boolean } @@ -17,7 +20,7 @@ export interface FeaturedProductProps { export interface RecipeProps { title: string - description:string + description: string imageSrc: string } diff --git a/tailwind.config.js b/tailwind.config.js index 894a7ab6e..69ab1ade5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -47,6 +47,7 @@ module.exports = { 'line': 'var(--border-line)', 'background': 'var(--background)', + 'background-gray': 'var(--background-gray)', 'white': 'var(--white)', 'background-arrow': 'var(--background-arrow)', From 7a5a28082b1bb831649aaef4068bb4cdc97b83da Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 17:26:23 +0700 Subject: [PATCH 25/61] :art: styles: product in cart :%s --- .../ProductCartItem.module.scss | 6 ++++- .../ProductsInCart/ProductsInCart.module.scss | 10 ++++--- .../ProductsInCart/ProductsInCart.tsx | 26 ++++++++++--------- src/utils/constanst.utils.ts | 1 + 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss index e8bd0e3ec..4988d4a66 100644 --- a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss +++ b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss @@ -5,7 +5,6 @@ grid-template-columns: 2fr 1fr; padding-bottom: 1.6rem; padding-top: 1.6rem; - border-bottom: 1px solid var(--border-line); .info { @apply flex; .imgWrap { @@ -18,6 +17,11 @@ } .detail { min-height: 9rem; + .name { + &:hover { + color: var(--primary); + } + } .price { margin-top: 0.8rem; .old { diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss index 96df763b8..61ef7421e 100644 --- a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss +++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss @@ -1,5 +1,9 @@ - .productsInCart { padding: 1.6rem 1.6rem 0 1.6rem; - margin-bottom: -1px; -} \ No newline at end of file + list-style: none; + li { + &:not(:last-child) { + border-bottom: 1px solid var(--border-line); + } + } +} diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx index 5eddc1c25..b455d4d73 100644 --- a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx +++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx @@ -8,20 +8,22 @@ interface Props { const ProductsInCart = ({ data }: Props) => { return ( -
    +
      { - data.map(item => ) + data.map(item =>
    • + +
      • ) } -
    +
) } diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index c732f6ed6..f680fa39c 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -8,6 +8,7 @@ export const SOCIAL_LINKS = { export const ROUTE = { HOME: '/', PRODUCTS: '/products', + PRODUCT_DETAIL: '/product', ABOUT: '/about', ACCOUNT: '/account', RECIPES: '/recipes', From aa285d85773e1e4097da6aa6446caffea14daeed Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 17:57:58 +0700 Subject: [PATCH 26/61] :art: styles: cart drawer :%s --- .../CarouselCommon/CarouselCommon.module.scss | 1 + .../components/CartMessage/CartMessage.module.scss | 1 + .../CartRecommendation.module.scss | 1 + .../components/ProductsInCart/ProductsInCart.tsx | 2 +- .../common/DrawerCommon/DrawerCommon.module.scss | 13 ++++++++----- 5 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/common/CarouselCommon/CarouselCommon.module.scss b/src/components/common/CarouselCommon/CarouselCommon.module.scss index da306f38f..ef2671947 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.module.scss +++ b/src/components/common/CarouselCommon/CarouselCommon.module.scss @@ -8,6 +8,7 @@ :global(.customArrow) { width: 64px; height: 64px; + border-radius: .8rem; &:focus { outline: none; } diff --git a/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss index 18d6f96cc..59d8e8ddc 100644 --- a/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss +++ b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss @@ -4,6 +4,7 @@ @apply flex bg-info; padding: 1.2rem 1.6rem; .text { + color: var(--white); font-weight: bold; margin-right: 0.8rem; } diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss index 5b1a5ffa6..88664460c 100644 --- a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss +++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss @@ -12,6 +12,7 @@ .productCardWarpper { padding-left: 1.6rem; :global(.customArrow) { + @apply bg-line; @screen lg { &:global(.leftArrow) { left: calc(-6.4rem - 2rem); diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx index b455d4d73..5d95feb98 100644 --- a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx +++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx @@ -10,7 +10,7 @@ const ProductsInCart = ({ data }: Props) => { return (