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

SeaPAk

+
+
+ Rp 32.000 + -15% +
+
Rp 27.500
+
+
+ In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley +
+
+ +
+ {LANGUAGE.BUTTON_LABEL.BUY_NOW} + {LANGUAGE.BUTTON_LABEL.ADD_TO_CARD} +
+
+ ) +} + +export default ProductInfo diff --git a/src/components/modules/product-detail/index.ts b/src/components/modules/product-detail/index.ts new file mode 100644 index 000000000..79dd056d0 --- /dev/null +++ b/src/components/modules/product-detail/index.ts @@ -0,0 +1 @@ +export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail' diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 67eb96726..e17e36944 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -21,7 +21,7 @@ --warning-light: #fef8eb; --negative-dark: #741a06; - --negative: #f34f2b; + --negative: #D1644D; --negative-border-line: #fddfd8; --negative-light: #feefec; diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts index 3f8d61926..cb7760943 100644 --- a/src/utils/language.utils.ts +++ b/src/utils/language.utils.ts @@ -2,6 +2,7 @@ export const LANGUAGE = { BUTTON_LABEL: { BUY_NOW: 'Buy now', SHOP_NOW: 'Shop now', + ADD_TO_CARD: 'Add to Cart' }, PLACE_HOLDER: { SEARCH: 'Search', From f6504be74f6ec48106fd4f312efc0c16a4cd78ae Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 30 Aug 2021 18:22:03 +0700 Subject: [PATCH 02/13] :art: styles: product info responsive :%s --- .../ProductInfoDetail.module.scss | 9 ++++ .../ProductImgs/ProductImgs.module.scss | 7 +++ .../ProductInfo/ProductInfo.module.scss | 45 ++++++++++++++++++- .../components/ProductInfo/ProductInfo.tsx | 16 +++++-- tailwind.config.js | 17 ++++--- 5 files changed, 81 insertions(+), 13 deletions(-) diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss index e69de29bb..f9b621b82 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss @@ -0,0 +1,9 @@ +@import '../../../../styles/utilities'; + +.productInfoDetail { + @apply spacing-horizontal; + margin: 0 auto 4rem; + @screen md { + @apply flex; + } +} \ No newline at end of file diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss index b368095e0..20f296a4a 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss @@ -1,4 +1,11 @@ .productImgs { + @apply w-full; + @screen sm-only { + margin-bottom: 2rem; + } + @screen lg { + max-width: 60rem; + } .img { @apply w-full h-full; object-fit: cover; diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss index 468e352ed..749725c89 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss @@ -1,6 +1,13 @@ @import "../../../../../../styles/utilities"; .productInfo { + @screen md { + max-width: 39rem; + margin-left: 4.8rem; + } + @screen lg { + margin-left: 11.2rem; + } .info { margin-bottom: 3.2rem; .heading { @@ -25,12 +32,46 @@ margin-top: 0.8rem; } } + .actions { + @screen sm-only { + @apply fixed flex justify-between items-center bg-white w-full; + z-index: 10000; + bottom: 0; + left: 0; + padding: 2rem; + } + } .bottom { + @screen sm-only { + @apply flex justify-between items-center flex-row-reverse; + margin-left: 1rem; + flex: 1; + button { + &:first-child { + min-width: 13rem; + } + &:nth-child(n + 1) { + margin-left: 0.8rem; + } + } + } + .buttonWithIcon { + @apply flex items-center; + .label { + @apply hidden; + @screen md { + @apply inline-block; + margin-left: 0.8rem; + } + } + } + button { + @apply w-full; + } + @screen md { margin-top: 2.4rem; - max-width: 39rem; button { - @apply w-full; &:first-child { margin-bottom: 0.8rem; } diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx index aeaf3e699..25fea44aa 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -1,5 +1,6 @@ import React from 'react' import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common' +import { IconBuy } from 'src/components/icons' import { LANGUAGE } from 'src/utils/language.utils' import s from './ProductInfo.module.scss' @@ -25,10 +26,17 @@ const ProductInfo = ({ }: Props) => { In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley - -
- {LANGUAGE.BUTTON_LABEL.BUY_NOW} - {LANGUAGE.BUTTON_LABEL.ADD_TO_CARD} +
+ +
+ {LANGUAGE.BUTTON_LABEL.BUY_NOW} + + + + {LANGUAGE.BUTTON_LABEL.ADD_TO_CARD} + + +
) diff --git a/tailwind.config.js b/tailwind.config.js index f94c85fd8..894a7ab6e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -49,17 +49,17 @@ module.exports = { 'background': 'var(--background)', 'white': 'var(--white)', - 'background-arrow':'var(--background-arrow)', + 'background-arrow': 'var(--background-arrow)', + - 'disabled': 'var(--text-disabled)', line: 'var(--border-line)', background: 'var(--background)', white: 'var(--white)', gray: 'var(--gray)', disabled: 'var(--text-disabled)', - 'background-arrow':'var(--background-arrow)', - + 'background-arrow': 'var(--background-arrow)', + // @deprecated (NOT use these variables) 'primary-2': 'var(--primary-2)', secondary: 'var(--secondary)', @@ -93,7 +93,7 @@ module.exports = { label: 'var(--text-label)', placeholder: 'var(--text-placeholder)', primary: 'var(--primary)', - + // @deprecated (NOT use these variables) secondary: 'var(--text-secondary)', }, @@ -109,12 +109,15 @@ module.exports = { rounded: '.8rem', }, screens: { + 'sm-only': {'min': '0', 'max': '767px'}, 'sm': '640px', // => @media (min-width: 640px) { ... } + 'md-only': {'min': '768px', 'max': '1023px'}, 'md': '768px', // => @media (min-width: 768px) { ... } + 'lg-only': {'min': '1024px', 'max': '1279px'}, 'lg': '1024px', // => @media (min-width: 1024px) { ... } @@ -124,8 +127,8 @@ module.exports = { '2xl': '1536px', // => @media (min-width: 1536px) { ... } }, - caroucel:{ - "arrow-height":"64px" + caroucel: { + "arrow-height": "64px" }, }, }, From a7d0eb051c3e040c12e7708874d8531f97b70e91 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 30 Aug 2021 18:32:45 +0700 Subject: [PATCH 03/13] :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 6169634dcafb1d89799710f9963937a7ff610139 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 1 Sep 2021 16:04:07 +0700 Subject: [PATCH 04/13] :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 05/13] :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 06/13] :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 07/13] :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 9a085570c119b6d943dcbfc7176c8d492d834952 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 12:25:51 +0700 Subject: [PATCH 08/13] :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 09/13] :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 10/13] :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 11/13] :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 12/13] :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 13/13] :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} - */} +