From 0e12b716c7d407114803c76d62b9d65cd31eaebb Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 6 Sep 2021 13:13:44 +0700 Subject: [PATCH] pull common --- pages/demo.tsx | 17 ++ .../ImgWithLink/ImgWithLink.module.scss | 4 + .../common/ImgWithLink/ImgWithLink.tsx | 16 ++ .../InfoProducts/InfoProducts.module.scss | 23 +++ .../InfoProducts/InfoProducts.tsx | 26 +++ .../ListProductWithInfo.module.scss | 48 ++++++ .../ListProductWithInfo.tsx | 51 ++++++ .../ProductNotSell/ProductNotSell.module.scss | 27 +++ .../ProductNotSell/ProductNotSell.tsx | 28 ++++ .../RecipeDetail/RecipeDetail.module.scss | 0 .../common/RecipeDetail/RecipeDetail.tsx | 23 +++ .../RecipeBriefInfo.module.scss | 19 +++ .../RecipeBriefInfo/RecipeBriefInfo.tsx | 29 ++++ .../RecipeDetailInfo.module.scss | 61 +++++++ .../RecipeDetailInfo/RecipeDetailInfo.tsx | 59 +++++++ .../RecipeIngredient.module.scss | 21 +++ .../RecipeIngredient/RecipeIngredient.tsx | 33 ++++ src/components/hooks/index.ts | 1 + src/components/icons/IconLocation.tsx | 11 ++ src/components/icons/IconPeople.tsx | 11 ++ src/components/icons/IconTime.tsx | 11 ++ .../ProductInfoDetail.module.scss | 10 ++ .../ProductInfoDetail/ProductInfoDetail.tsx | 20 +++ .../ProductImgs/ProductImgs.module.scss | 9 + .../components/ProductImgs/ProductImgs.tsx | 40 +++++ .../ProductInfo/ProductInfo.module.scss | 81 +++++++++ .../components/ProductInfo/ProductInfo.tsx | 46 ++++++ .../RecommendedRecipes.module.scss | 27 +++ .../RecommendedRecipes/RecommendedRecipes.tsx | 51 ++++++ .../ReleventProducts/ReleventProducts.tsx | 15 ++ .../ViewedProducts/ViewedProducts.tsx | 15 ++ .../modules/product-detail/index.ts | 4 + src/utils/demo-data.ts | 154 ++++++++++++++++++ 33 files changed, 991 insertions(+) create mode 100644 pages/demo.tsx create mode 100644 src/components/common/ImgWithLink/ImgWithLink.module.scss create mode 100644 src/components/common/ImgWithLink/ImgWithLink.tsx create mode 100644 src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss create mode 100644 src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx create mode 100644 src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss create mode 100644 src/components/common/ListProductWithInfo/ListProductWithInfo.tsx create mode 100644 src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss create mode 100644 src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx create mode 100644 src/components/common/RecipeDetail/RecipeDetail.module.scss create mode 100644 src/components/common/RecipeDetail/RecipeDetail.tsx create mode 100644 src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss create mode 100644 src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx create mode 100644 src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss create mode 100644 src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx create mode 100644 src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss create mode 100644 src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx create mode 100644 src/components/hooks/index.ts create mode 100644 src/components/icons/IconLocation.tsx create mode 100644 src/components/icons/IconPeople.tsx create mode 100644 src/components/icons/IconTime.tsx create mode 100644 src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx create mode 100644 src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss create mode 100644 src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx create mode 100644 src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx create mode 100644 src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx create mode 100644 src/components/modules/product-detail/index.ts create mode 100644 src/utils/demo-data.ts diff --git a/pages/demo.tsx b/pages/demo.tsx new file mode 100644 index 000000000..f23c10583 --- /dev/null +++ b/pages/demo.tsx @@ -0,0 +1,17 @@ +import { Layout, RecipeDetail } from 'src/components/common'; +import { ProductInfoDetail, ViewedProducts, ReleventProducts, RecommendedRecipes } from 'src/components/modules/product-detail'; +import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'; + + + +export default function Demo() { + return <> + + + + + + +} + +Demo.Layout = Layout diff --git a/src/components/common/ImgWithLink/ImgWithLink.module.scss b/src/components/common/ImgWithLink/ImgWithLink.module.scss new file mode 100644 index 000000000..b1587bfa6 --- /dev/null +++ b/src/components/common/ImgWithLink/ImgWithLink.module.scss @@ -0,0 +1,4 @@ +.imgWithLink { + @apply w-full h-full; + object-fit: cover; +} diff --git a/src/components/common/ImgWithLink/ImgWithLink.tsx b/src/components/common/ImgWithLink/ImgWithLink.tsx new file mode 100644 index 000000000..43ac1caa6 --- /dev/null +++ b/src/components/common/ImgWithLink/ImgWithLink.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import s from './ImgWithLink.module.scss' + +export interface ImgWithLinkProps { + src: string, + alt?: string, +} + +const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => { + return ( + {alt} + + ) +} + +export default ImgWithLink \ No newline at end of file diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss new file mode 100644 index 000000000..c1cd9966e --- /dev/null +++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss @@ -0,0 +1,23 @@ +@import "../../../../styles/utilities"; + +.infoProducts { + @apply flex justify-between items-center spacing-horizontal; + + .top { + .sub { + display: none; + } + } + @screen lg { + @apply block; + margin-right: 4rem; + padding: 0; + .top { + margin-bottom: 3.2rem; + .sub { + display: block; + margin-top: 0.4rem; + } + } + } +} diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx new file mode 100644 index 000000000..25e18252c --- /dev/null +++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { ROUTE } from 'src/utils/constanst.utils'; +import HeadingCommon from '../../HeadingCommon/HeadingCommon'; +import ViewAllItem from '../../ViewAllItem/ViewAllItem'; +import s from './InfoProducts.module.scss' +interface Props { + title: string, + subtitle?: string, +} + +const InfoProducts = ({ title, subtitle }: Props) => { + return ( +
+
+ {title} +
+ {subtitle} +
+
+ + +
+ ); +}; + +export default InfoProducts; \ No newline at end of file diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss new file mode 100644 index 000000000..d2443dccc --- /dev/null +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss @@ -0,0 +1,48 @@ +@import "../../../styles/utilities"; + +.listProductWithInfo { + background-color: var(--background); + border-top: 1rem solid var(--gray); + border-bottom: 1rem solid var(--gray); + padding-top: 6rem; + padding-bottom: 6rem; + @screen lg { + @apply flex spacing-horizontal-left; + padding-top: 5.6rem; + padding-bottom: 5.6rem; + border: none; + background-color: #f5f4f2; + } + .productsWrap { + @apply spacing-horizontal-left; + @screen lg { + max-width: 75%; + @apply custom-border-radius-lg bg-white; + padding: 4rem .8rem; + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem + 3rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem + 3rem); + } + } + } + } + @screen xl { + padding: 4rem 2.4rem; + max-width: 80%; + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem + 1rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem + 1rem); + } + } + } + } + } +} diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx new file mode 100644 index 000000000..66b8253d1 --- /dev/null +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx @@ -0,0 +1,51 @@ +import { TOptionsEvents } from 'keen-slider'; +import React from 'react'; +import CarouselCommon from '../CarouselCommon/CarouselCommon'; +import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'; +import InfoProducts from './InfoProducts/InfoProducts'; +import s from './ListProductWithInfo.module.scss'; + +interface Props { + data: ProductCardProps[], + title: string, + subtitle?: string, +} +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 2, + mode: 'free', + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 3, + }, + '(min-width: 768px)': { + slidesPerView: 4, + }, + '(min-width: 1024px)': { + slidesPerView: 3, + }, + '(min-width: 1280px)': { + slidesPerView: 4.5, + }, + }, +} + +const ListProductWithInfo = ({ data, title, subtitle }: Props) => { + return ( +
+ +
+ + data={data} + Component={ProductCard} + itemKey={title} + option={OPTION_DEFAULT} + /> +
+
+ ); +}; + +export default ListProductWithInfo; \ No newline at end of file diff --git a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss new file mode 100644 index 000000000..4945220a9 --- /dev/null +++ b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss @@ -0,0 +1,27 @@ +@import "../../../../styles/utilities"; + +.imgWrap { + img { + opacity: 0.5; + } +} + +.name { + @apply text-label cursor-default font-bold; +} + +.info { + @apply flex justify-center items-center custom-border-radius bg-info-light text-center; + padding: .8rem 1.6rem; + margin-top: 1.6rem; + color: var(--info); + svg { + @apply u-icon; + path { + fill: currentColor; + } + } + .text { + margin-left: 0.8rem; + } +} diff --git a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx new file mode 100644 index 000000000..f87d87c43 --- /dev/null +++ b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { IconInfo } from 'src/components/icons'; +import ImgWithLink from '../../ImgWithLink/ImgWithLink'; +import s from './ProductNotSell.module.scss'; + +export interface Props { + name: string, + imageSrc: string, +} + +const ProductNotSell = ({ name, imageSrc }: Props) => { + return ( + <> +
+ +
+
{name}
+
+ +
+ Not Sell +
+
+ + ); +}; + +export default ProductNotSell; \ No newline at end of file diff --git a/src/components/common/RecipeDetail/RecipeDetail.module.scss b/src/components/common/RecipeDetail/RecipeDetail.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/common/RecipeDetail/RecipeDetail.tsx b/src/components/common/RecipeDetail/RecipeDetail.tsx new file mode 100644 index 000000000..cdec99994 --- /dev/null +++ b/src/components/common/RecipeDetail/RecipeDetail.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { ProductCardProps } from '../ProductCard/ProductCard' +import RecipeDetailInfo from './components/RecipeDetailInfo/RecipeDetailInfo' +import RecipeIngredient from './components/RecipeIngredient/RecipeIngredient' +import s from './RecipeDetail.module.scss' + + +interface Props { + className?: string + children?: any, + ingredients: ProductCardProps[], +} + +const RecipeDetail = ({ ingredients }: Props) => { + return ( +
+ + +
+ ) +} + +export default RecipeDetail diff --git a/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss new file mode 100644 index 000000000..56f1e6500 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss @@ -0,0 +1,19 @@ +.recipeBriefInfo { + @apply flex; + .item { + @apply flex; + &:not(:last-child) { + margin-right: 2.4rem; + } + svg { + width: 2rem; + height: 2rem; + path { + fill: var(--text-label); + } + } + .content { + margin-left: 0.8rem; + } + } +} diff --git a/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx new file mode 100644 index 000000000..d06387914 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { IconLocation, IconPeople, IconTime } from 'src/components/icons' +import s from './RecipeBriefInfo.module.scss' + +interface Props { + className?: string + children?: any, +} + +const RecipeBriefInfo = ({ }: Props) => { + return ( +
+
+ +
15 minutes
+
+
+ +
4 People
+
+
+ +
15 minutes
+
+
+ ) +} + +export default RecipeBriefInfo diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss new file mode 100644 index 000000000..86b525083 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss @@ -0,0 +1,61 @@ +@import "../../../../../styles/utilities"; + +.recipeDetailInfo { + @apply spacing-horizontal; + margin: 5.6rem auto; + @screen md { + @apply flex; + } + .img { + width: fit-content; + margin-top: 0; + + @screen sm-only { + margin-bottom: 2rem; + } + @screen lg { + max-width: 60rem; + } + img { + @apply w-full; + object-fit: contain; + max-height: 64rem; + border-radius: 2.4rem; + @screen md { + max-height: 90rem; + } + } + } + + .recipeInfo { + @screen md { + max-width: 39rem; + margin-left: 4.8rem; + } + @screen lg { + margin-left: 11.2rem; + } + .top { + margin-bottom: 4.8rem; + .name { + @apply heading-1 font-heading; + margin-bottom: 1.6rem; + } + } + .detail { + .item { + &:not(:last-child) { + margin-bottom: 2.4rem; + } + .heading { + @apply heading-3 font-heading; + margin-bottom: 0.8rem; + } + .content { + list-style: disc; + margin-left: 2rem; + } + } + } + } +} diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx new file mode 100644 index 000000000..4d212e10a --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import RecipeBriefInfo from '../RecipeBriefInfo/RecipeBriefInfo' +import s from './RecipeDetailInfo.module.scss' + + +interface Props { + className?: string + children?: any +} + +const RecipeDetailInfo = ({ }: Props) => { + return ( +
+
+ Recipe +
+
+
+

+ Crispy Fried Calamari +

+ +
+
+
+

Ingredients

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

Preparation

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

SeaPAk

+
+
+ Rp 32.000 + -15% +
+
Rp 27.500
+
+
+ In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley +
+
+
+ +
+ {/* {LANGUAGE.BUTTON_LABEL.PREORDER} */} + {LANGUAGE.BUTTON_LABEL.BUY_NOW} + + + + {LANGUAGE.BUTTON_LABEL.ADD_TO_CARD} + + +
+
+
+ ) +} + +export default ProductInfo diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss new file mode 100644 index 000000000..d43e2d58c --- /dev/null +++ b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss @@ -0,0 +1,27 @@ +@import "../../../../styles/utilities"; + +.recommendedRecipes { + margin: 6rem auto; + @screen md { + margin: 5.6rem auto; + } + .infoProducts { + @apply flex justify-between items-center spacing-horizontal; + margin-bottom: 3.2rem; + } + .productsWrap { + @apply spacing-horizontal-left; + @screen xl { + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem - 2rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem - 2rem); + } + } + } + } + } +} diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx new file mode 100644 index 000000000..34950fbab --- /dev/null +++ b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx @@ -0,0 +1,51 @@ +import { TOptionsEvents } from 'keen-slider'; +import React from 'react'; +import { CarouselCommon, HeadingCommon, RecipeCard, ViewAllItem } from 'src/components/common'; +import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'; +import { ROUTE } from 'src/utils/constanst.utils'; +import s from './RecommendedRecipes.module.scss'; + +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 1.25, + mode: 'free', + spacing: 24, + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 2, + }, + '(min-width: 1024px)': { + slidesPerView: 2.5, + }, + '(min-width: 1440px)': { + slidesPerView: 3, + }, + '(min-width: 1536px)': { + slidesPerView: 3.5, + }, + }, +} + +interface Props { + data: RecipeCardProps[], +} + +const RecommendedRecipes = ({ data }: Props) => { + return ( +
+
+ Recommended Recipes + +
+
+ + data={data} + Component={RecipeCard} + itemKey="Recommended Recipes" + option={OPTION_DEFAULT} + /> +
+
+ ); +}; + +export default RecommendedRecipes; \ No newline at end of file diff --git a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx new file mode 100644 index 000000000..e11d31065 --- /dev/null +++ b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; + +const ReleventProducts = () => { + return ( + + ); +}; + +export default ReleventProducts; \ No newline at end of file diff --git a/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx new file mode 100644 index 000000000..820af402f --- /dev/null +++ b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; + +const ViewedProducts = () => { + return ( + + ); +}; + +export default ViewedProducts; \ No newline at end of file diff --git a/src/components/modules/product-detail/index.ts b/src/components/modules/product-detail/index.ts new file mode 100644 index 000000000..ef4461432 --- /dev/null +++ b/src/components/modules/product-detail/index.ts @@ -0,0 +1,4 @@ +export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail' +export { default as ViewedProducts } from './ViewedProducts/ViewedProducts' +export { default as ReleventProducts } from './ReleventProducts/ReleventProducts' +export { default as RecommendedRecipes } from './RecommendedRecipes/RecommendedRecipes' diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts new file mode 100644 index 000000000..b22668e15 --- /dev/null +++ b/src/utils/demo-data.ts @@ -0,0 +1,154 @@ +import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard" + +export const PRODUCT_DATA_TEST = [ + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + }, + { + name: 'Carrot', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png", + }, + { + name: 'Salad', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png", + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646224-d22dc2e4-6ae8-4bbe-adcf-491ce191f09b.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646225-2728f192-481b-4142-99b0-dde92f53c6c6.png", + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png", + }, +] + +export const INGREDIENT_DATA_TEST = [ + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + isNotSell: true, + }, + { + name: 'Carrot', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png", + }, + { + name: 'Salad', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png", + isNotSell: true, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646224-d22dc2e4-6ae8-4bbe-adcf-491ce191f09b.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646225-2728f192-481b-4142-99b0-dde92f53c6c6.png", + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png", + }, + { + name: 'Cucumber', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png", + }, +] + +export const RECIPE_DATA_TEST: RecipeCardProps[] = [ + { + title: "Special Recipe of Vietnamese Phở", + description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png' + }, + { + title: "Original Recipe of Curry", + description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png' + }, + { + title: "The Best Recipe of Beef Noodle Soup", + description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png' + }, + { + title: "Special Recipe of Vietnamese Phở", + description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png' + }, + { + title: "Original Recipe of Curry", + description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png' + }, + { + title: "The Best Recipe of Beef Noodle Soup", + description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...", + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png' + }, +] \ No newline at end of file