From d9e0cc248f667e4b8f8386bdb491ebc2a809b0f1 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 30 Aug 2021 13:41:45 +0700 Subject: [PATCH 01/33] :sparkles: feat: Modal confirm modal info :%s --- pages/test.tsx | 129 +----------------- .../common/ModalCommon/ModalCommon.tsx | 4 +- .../ModalConfirm/ModalConfirm.module.scss | 4 + .../common/ModalConfirm/ModalConfirm.tsx | 34 +++++ .../common/ModalInfo/ModalInfo.module.scss | 4 + src/components/common/ModalInfo/ModalInfo.tsx | 27 ++++ src/components/common/index.ts | 2 + 7 files changed, 79 insertions(+), 125 deletions(-) create mode 100644 src/components/common/ModalConfirm/ModalConfirm.module.scss create mode 100644 src/components/common/ModalConfirm/ModalConfirm.tsx create mode 100644 src/components/common/ModalInfo/ModalInfo.module.scss create mode 100644 src/components/common/ModalInfo/ModalInfo.tsx diff --git a/pages/test.tsx b/pages/test.tsx index 5ac220819..6a1922f5a 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -3,99 +3,11 @@ import { ButtonCommon, Layout, ModalCommon, + ModalConfirm, + ModalInfo, ProductCarousel, } from 'src/components/common' -import { CollectionCarcousel } from 'src/components/modules/home' -import image5 from '../public/assets/images/image5.png' -import image6 from '../public/assets/images/image6.png' -import image7 from '../public/assets/images/image7.png' -import image8 from '../public/assets/images/image8.png' -const dataTest = [ - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Cucumber', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image6.src, - }, - { - name: 'Carrot', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image7.src, - }, - { - name: 'Salad', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image8.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Cucumber', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image6.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Cucumber', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image6.src, - }, - { - name: 'Carrot', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image7.src, - }, - { - name: 'Salad', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image8.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Cucumber', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image6.src, - }, -] + export default function Test() { const [visible, setVisible] = useState(false) const onClose = () => { @@ -107,38 +19,9 @@ export default function Test() { return ( <> open - -
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur - officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod - itaque, officia magni molestias! Architecto deserunt soluta laborum - commodi nesciunt delectus similique temporibus distinctio? Facere - eaque minima enim modi magni, laudantium, animi mollitia beatae - repudiandae maxime labore error nesciunt, nisi est? -
- - + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi? + ) } diff --git a/src/components/common/ModalCommon/ModalCommon.tsx b/src/components/common/ModalCommon/ModalCommon.tsx index 2ed90a3b3..75222c162 100644 --- a/src/components/common/ModalCommon/ModalCommon.tsx +++ b/src/components/common/ModalCommon/ModalCommon.tsx @@ -2,7 +2,7 @@ import React, { useRef } from 'react' import { Close } from 'src/components/icons' import { useOnClickOutside } from 'src/utils/useClickOutSide' import s from './ModalCommon.module.scss' -interface Props { +export interface ModalCommonProps { onClose: () => void visible: boolean children: React.ReactNode @@ -10,7 +10,7 @@ interface Props { maxWidth?:string } -const ModalCommon = ({ onClose, visible, children, title="Modal",maxWidth }: Props) => { +const ModalCommon = ({ onClose, visible, children, title="Modal",maxWidth }: ModalCommonProps) => { const modalRef = useRef(null) const clickOutSide = () => { onClose && onClose() diff --git a/src/components/common/ModalConfirm/ModalConfirm.module.scss b/src/components/common/ModalConfirm/ModalConfirm.module.scss new file mode 100644 index 000000000..ac167b2a2 --- /dev/null +++ b/src/components/common/ModalConfirm/ModalConfirm.module.scss @@ -0,0 +1,4 @@ +.footer{ + margin-top: 4rem; + @apply flex justify-end items-center; +} \ No newline at end of file diff --git a/src/components/common/ModalConfirm/ModalConfirm.tsx b/src/components/common/ModalConfirm/ModalConfirm.tsx new file mode 100644 index 000000000..1e425482f --- /dev/null +++ b/src/components/common/ModalConfirm/ModalConfirm.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import ButtonCommon from '../ButtonCommon/ButtonCommon' +import ModalCommon, { ModalCommonProps } from '../ModalCommon/ModalCommon' +import s from './ModalConfirm.module.scss' +interface ModalConfirmProps extends ModalCommonProps { + okText?: String + cancelText?: String + onOk?: () => void + onCancel?: () => void +} + +const ModalConfirm = ({ + okText = 'Ok', + cancelText = 'cancel', + onOk, + onCancel, + children, + title = 'Confirm', + ...props +}: ModalConfirmProps) => { + return ( + + {children} +
+
+ {cancelText} +
+ {okText} +
+ + ) +} + +export default ModalConfirm diff --git a/src/components/common/ModalInfo/ModalInfo.module.scss b/src/components/common/ModalInfo/ModalInfo.module.scss new file mode 100644 index 000000000..ac167b2a2 --- /dev/null +++ b/src/components/common/ModalInfo/ModalInfo.module.scss @@ -0,0 +1,4 @@ +.footer{ + margin-top: 4rem; + @apply flex justify-end items-center; +} \ No newline at end of file diff --git a/src/components/common/ModalInfo/ModalInfo.tsx b/src/components/common/ModalInfo/ModalInfo.tsx new file mode 100644 index 000000000..1880d8f63 --- /dev/null +++ b/src/components/common/ModalInfo/ModalInfo.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import ButtonCommon from '../ButtonCommon/ButtonCommon' +import ModalCommon, { ModalCommonProps } from '../ModalCommon/ModalCommon' +import s from './ModalInfo.module.scss' +interface ModalInfoProps extends ModalCommonProps { + okText?: String + onOk?: () => void +} + +const ModalInfo = ({ + okText = 'Ok', + onOk, + children, + title = 'Confirm', + ...props +}: ModalInfoProps) => { + return ( + + {children} +
+ {okText} +
+ + ) +} + +export default ModalInfo diff --git a/src/components/common/index.ts b/src/components/common/index.ts index dc0288966..ba7743f70 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -28,3 +28,5 @@ export { default as NotiMessage} from './NotiMessage/NotiMessage' export { default as VideoPlayer} from './VideoPlayer/VideoPlayer' export { default as SelectCommon} from './SelectCommon/SelectCommon' export { default as ModalCommon} from './ModalCommon/ModalCommon' +export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm" +export { default as ModalInfo} from "./ModalInfo/ModalInfo" From 7904ec4d8535380bc7dd4d962f7fa1e196cb9e8f Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 30 Aug 2021 15:26:35 +0700 Subject: [PATCH 02/33] :sparkles: feat: Modal confirm modal info :%s --- .../CarouselCommon/CarouselCommon.module.scss | 10 ++++++++-- .../CustomCarouselArrow.module.scss | 20 +------------------ .../PaginationCommon.module.scss | 0 .../PaginationCommon/PaginationCommon.tsx | 15 ++++++++++++++ 4 files changed, 24 insertions(+), 21 deletions(-) create mode 100644 src/components/common/PaginationCommon/PaginationCommon.module.scss create mode 100644 src/components/common/PaginationCommon/PaginationCommon.tsx diff --git a/src/components/common/CarouselCommon/CarouselCommon.module.scss b/src/components/common/CarouselCommon/CarouselCommon.module.scss index 802c25bb0..da306f38f 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.module.scss +++ b/src/components/common/CarouselCommon/CarouselCommon.module.scss @@ -13,10 +13,16 @@ } @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100; &:global(.leftArrow) { - @apply left-0; + @apply hidden left-0; + @screen md { + @apply flex + } } &:global(.rightArrow) { - @apply right-0; + @apply hidden right-0; + @screen md { + @apply flex; + } } &:global(.isDisabledArrow) { @apply hidden; diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss index fb174c66c..139597f9c 100644 --- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss +++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss @@ -1,20 +1,2 @@ -.navigationWrapper{ - :global(.customArrow) { - width: 64px; - height: 64px; - &:focus{ - outline: none; - } - @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100; - &.leftArrow{ - @apply left-0; - } - &.rightArrow{ - @apply right-0; - } - &.isDisabled{ - @apply hidden ; - } - } -} + diff --git a/src/components/common/PaginationCommon/PaginationCommon.module.scss b/src/components/common/PaginationCommon/PaginationCommon.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/common/PaginationCommon/PaginationCommon.tsx b/src/components/common/PaginationCommon/PaginationCommon.tsx new file mode 100644 index 000000000..59bbd3baa --- /dev/null +++ b/src/components/common/PaginationCommon/PaginationCommon.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +interface PaginationCommonProps { + +} + +const PaginationCommon = (props: PaginationCommonProps) => { + return ( +
+ +
+ ) +} + +export default PaginationCommon From 185601f002858a643c2beae4a60e516802d60c70 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 30 Aug 2021 16:46:52 +0700 Subject: [PATCH 03/33] :sparkles: feat: Breadcrumb Common --- .../BreadcrumbCommon.module.scss | 6 +++ .../BreadcrumbCommon/BreadcrumbCommon.tsx | 54 +++++++++++++++++++ .../BreadcrumbItem/BreadcrumbItem.tsx | 17 ++++++ .../BreadcrumbSeparator.tsx | 15 ++++++ 4 files changed, 92 insertions(+) create mode 100644 src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss create mode 100644 src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx create mode 100644 src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx create mode 100644 src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss new file mode 100644 index 000000000..6741f386c --- /dev/null +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss @@ -0,0 +1,6 @@ +@import '../../../styles/utilities'; + +.breadcrumbCommon { + @apply spacing-horizontal-left; + color: var(--text-base); +} \ No newline at end of file diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx new file mode 100644 index 000000000..8b36f7e50 --- /dev/null +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx @@ -0,0 +1,54 @@ +import React from 'react' +import s from './BreadcrumbCommon.module.scss' + +import { useRouter } from 'next/router' + +import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem' +import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator' + +const BreadcrumbCommon = () => { + + const paths: string | any = { + "/": "Home", + "fresh-product-today" : "Fresh Product Today", + "product-list": "Product List", + "recipes-list": "Recipes List", + "blogs": "Blog", + "account": "Account", + "delivery&policy": "Delivery & Policy", + "product-detail": "Product Detail", + "recipes-detail": "Recipes Detail", + "blog-detail": "Blog Detail" + } + + const router = useRouter(); + let crumbs = router.route.split('/'); + + return ( +
+ + { + crumbs.map((crumb, i) => { + if (crumb === "") { + return + } + if (i === crumbs.length-1) { + return ( + + + + ) + } + return ( + + + + ) + }) + } +
+ ) + +} + +export default BreadcrumbCommon diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx new file mode 100644 index 000000000..9a501c93f --- /dev/null +++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import Link from 'next/link' + +interface BreadcrumbItemProps { + text: string; + href: string; +} + +const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => { + return ( + + {text} + + ) +} + +export default BreadcrumbItem diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx new file mode 100644 index 000000000..c877e60bc --- /dev/null +++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +interface BreadcrumbSeparatorProps { + children: any; +} + +const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => { + return ( + +  / {children} + + ) +} + +export default BreadcrumbSeparator From 887c3ae2e33ab223c3f98331203a98e0e87f4196 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 30 Aug 2021 17:20:35 +0700 Subject: [PATCH 04/33] :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 05/33] :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 06/33] :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 8c7c57175d50dfc9a9fd10ef03cae700e3c89e33 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 31 Aug 2021 10:44:11 +0700 Subject: [PATCH 07/33] :sparkles: feat: Breadcrumbs Common --- .../BreadcrumbCommon/BreadcrumbCommon.tsx | 37 +++++++------------ .../BreadcrumbItem/BreadcrumbItem.tsx | 4 +- .../BreadcrumbSeparator.tsx | 2 +- 3 files changed, 16 insertions(+), 27 deletions(-) diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx index 8b36f7e50..615a26893 100644 --- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx @@ -1,54 +1,43 @@ import React from 'react' import s from './BreadcrumbCommon.module.scss' -import { useRouter } from 'next/router' - import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem' import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator' -const BreadcrumbCommon = () => { +interface BreadcrumbCommonProps { + crumbs: { link:string, name:string }[]; + showHomePage?: boolean; +} - const paths: string | any = { - "/": "Home", - "fresh-product-today" : "Fresh Product Today", - "product-list": "Product List", - "recipes-list": "Recipes List", - "blogs": "Blog", - "account": "Account", - "delivery&policy": "Delivery & Policy", - "product-detail": "Product Detail", - "recipes-detail": "Recipes Detail", - "blog-detail": "Blog Detail" +const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => { + if (showHomePage) { + crumbs.unshift({link: "/", name: "Home"}); } - - const router = useRouter(); - let crumbs = router.route.split('/'); - return (
- { crumbs.map((crumb, i) => { - if (crumb === "") { - return + if (i === 0) { + return ( + + ) } if (i === crumbs.length-1) { return ( - + ) } return ( - + ) }) }
) - } export default BreadcrumbCommon diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx index 9a501c93f..f807de555 100644 --- a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx +++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx @@ -8,8 +8,8 @@ interface BreadcrumbItemProps { const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => { return ( - - {text} + + {text} ) } diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx index c877e60bc..370c342d8 100644 --- a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx +++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx @@ -1,7 +1,7 @@ import React from 'react' interface BreadcrumbSeparatorProps { - children: any; + children?: React.ReactNode } const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => { From 6169634dcafb1d89799710f9963937a7ff610139 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 1 Sep 2021 16:04:07 +0700 Subject: [PATCH 08/33] :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 09/33] :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 10/33] :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 9b669335ca470f364f4d0cad1b0aecce4d7e272c Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 09:10:02 +0700 Subject: [PATCH 11/33] :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 e1c3acb4625f3c6424f05205350b0162df0baecc Mon Sep 17 00:00:00 2001 From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com> Date: Mon, 6 Sep 2021 10:15:43 +0700 Subject: [PATCH 12/33] :sparkles: feat: Breadcrumb Common --- .../common/BreadcrumbCommon/BreadcrumbCommon.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx index 615a26893..a343ac55e 100644 --- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx @@ -19,19 +19,19 @@ const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) crumbs.map((crumb, i) => { if (i === 0) { return ( - + ) } if (i === crumbs.length-1) { return ( - - + + {crumb.name} ) } return ( - - + + ) }) From 361911e328d621bbbb7d0ccb920dfa5783a007b0 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com> Date: Mon, 6 Sep 2021 10:48:01 +0700 Subject: [PATCH 13/33] :art: style: update style --- .../common/BreadcrumbCommon/BreadcrumbCommon.module.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss index 6741f386c..d72ea413b 100644 --- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss @@ -1,6 +1,5 @@ @import '../../../styles/utilities'; .breadcrumbCommon { - @apply spacing-horizontal-left; color: var(--text-base); -} \ No newline at end of file +} 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 14/33] :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 15/33] :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 16/33] :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 17/33] :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 18/33] :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 19/33] :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 20/33] :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 21/33] :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 432c7b403c1263806f60e0f275d23cb17d9c9c19 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 14:10:55 +0700 Subject: [PATCH 22/33] :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 23/33] :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 24/33] 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 fc39eb17589c9bb3449b60a5829594f04342ccfb Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 17:06:06 +0700 Subject: [PATCH 25/33] :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}
-