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

+ Crispy Fried Calamari +

+ +
+
+
+

Ingredients

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

Preparation

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

SeaPAk

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

+ {title} +

+
+ +
+
+
+ {children} +
+
+
+ ) +} + +export default DrawerCommon; \ No newline at end of file diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index aa5da11e1..e7190f404 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -1,6 +1,8 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' +import { useModalCommon } from 'src/components/hooks' +import { DrawerCommon, ScrollToTop } from '..' import Footer from '../Footer/Footer' import Header from '../Header/Header' import s from './Layout.module.scss' @@ -13,12 +15,25 @@ interface Props { // note: demo code const Layout: FC = ({ children }) => { const { locale = 'en-US' } = useRouter() + const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: true }) + const toggle = () => { + if (visibleCartDrawer) { + closeCartDrawer() + } else { + openModal() + } + } return (
+
{children}
+
diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 2c1b53b95..edbc5f0a6 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -34,3 +34,4 @@ export { default as ModalInfo} from "./ModalInfo/ModalInfo" export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo' export { default as ImgWithLink} from './ImgWithLink/ImgWithLink' export { default as RecipeDetail} from './RecipeDetail/RecipeDetail' +export { default as DrawerCommon} from './DrawerCommon/DrawerCommon' diff --git a/src/components/icons/IconClose.tsx b/src/components/icons/IconClose.tsx new file mode 100644 index 000000000..018ee8cd6 --- /dev/null +++ b/src/components/icons/IconClose.tsx @@ -0,0 +1,20 @@ +import React from 'react' + +const IconClose = () => { + return ( + + + + ) +} + +export default IconClose diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 1cdb56079..3430e52af 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -23,3 +23,4 @@ export { default as IconCheck } from './IconCheck' export { default as IconTime } from './IconTime' export { default as IconPeople } from './IconPeople' export { default as IconLocation } from './IconLocation' +export { default as IconClose } from './IconClose' From 807fbff17729937e17107338b7ae0373d0b510d7 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 6 Sep 2021 14:57:43 +0700 Subject: [PATCH 03/17] feat: SelectCommon --- pages/index.tsx | 28 ++++--- .../SelectCommon/SelectCommon.module.scss | 79 +++++++++++++++---- .../common/SelectCommon/SelectCommon.tsx | 56 +++++++++---- .../SelectOption/SelectOption.module.scss | 20 +++++ .../SelectOption/SelectOption.tsx | 28 +++++++ src/components/icons/IconVectorDown.tsx | 19 +++++ src/components/icons/index.ts | 1 + 7 files changed, 193 insertions(+), 38 deletions(-) create mode 100644 src/components/common/SelectCommon/SelectOption/SelectOption.module.scss create mode 100644 src/components/common/SelectCommon/SelectOption/SelectOption.tsx create mode 100644 src/components/icons/IconVectorDown.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 1d3072ef7..e12963435 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,18 +1,28 @@ -import { Layout } from 'src/components/common' +import { Layout, SelectCommon } from 'src/components/common' import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories, HomeFeature, HomeRecipe } from 'src/components/modules/home'; +const OPTION_TEST = [ + { + name: "By Name", + value: "Name" + }, + { + name: "Price (High to Low)", + value: "Price" + }, + { + name: "On Sale", + value: "Sale" + } +] +const handleChange = (value:string) => { + console.log(value) +} export default function Home() { return ( <> - - - - - - - - + ) } diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss index dcb9120da..71aed96f0 100644 --- a/src/components/common/SelectCommon/SelectCommon.module.scss +++ b/src/components/common/SelectCommon/SelectCommon.module.scss @@ -1,32 +1,81 @@ @import "../../../styles/utilities"; .select{ - @apply rounded-lg border-solid; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - padding: 1.2rem 1.6rem; + background-color: var(--white); &.base{ - width: 18.6rem; - height: 4.8rem; + width: 20.6rem; + .selectTrigger{ + width: 20.6rem; + padding: 1.2rem 1.6rem; + } } &.large{ width: 34.25rem; - height: 5.6rem; + .selectTrigger{ + width: 34.25rem; + padding: 1.6rem 1.6rem; + } } &.default{ - @apply border; + .selectTrigger{ + @apply border-solid border border-current; + } + } + &.custom{ + .selectTrigger{ + @apply border-2; + border-color: var(--border-line); + color: var(--text-label); + } + } + &:hover{ + .hoverWrapper{ + @apply block; + animation: SelectAnimation 0.2s ease-out; + } + } +} +.selectTrigger{ + @apply outline-none flex justify-between; + color: var(--text-active); + border-radius: 0.8rem; + +} +.hoverWrapper{ + @apply hidden; + padding-top: 0.6rem; + &:hover{ + @apply block; + } +} +.selectOptionWrapper{ + @apply outline-none z-10 absolute; + border-radius: 0.8rem; + background-color: var(--white); + padding: 0.4rem 0rem 0.4rem 0rem; + &.base{ + width: 20.6rem; + } + &.large{ + width: 34.25rem; + } + &.default{ + @apply border-solid border border-current; } &.custom{ @apply border-2; border-color: var(--border-line); color: var(--text-label); } - .option{ - &:hover{ - background-color: black; - } - } } +@keyframes SelectAnimation { + 0% { + opacity: 0; + transform: translateY(1.6rem); + } + 100% { + opacity: 1; + transform: none; + } +} \ No newline at end of file diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx index 8360a700f..0eea2b2e0 100644 --- a/src/components/common/SelectCommon/SelectCommon.tsx +++ b/src/components/common/SelectCommon/SelectCommon.tsx @@ -1,26 +1,54 @@ import s from './SelectCommon.module.scss' import classNames from 'classnames' +import { useState } from 'react' +import { IconVectorDown } from 'src/components/icons' +import SelectOption from './SelectOption/SelectOption' interface Props { - placeHolder? : string, + placeholder? : string, size?: 'base' | 'large', type?: 'default' | 'custom', - option: {name: string}[], + option: {name: string, value: string}[], + onChange?: (value: string) => void, } -const SelectCommon = ({ type = 'default', size = 'base', option, placeHolder }: Props) => { +const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange }: Props) => { + const [selectedName, setSelectedName] = useState(placeholder) + + const changeSelectedName = (item:string, value: string) => { + setSelectedName(item) + onChange && onChange(value) + } return( - + <> +
+
{selectedName}
+
+
+ { + option.map(item => + + ) + } +
+
+ +
+ ) } diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss new file mode 100644 index 000000000..fa8eec541 --- /dev/null +++ b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss @@ -0,0 +1,20 @@ +@import "../../../../styles/utilities"; + +.selectOption { + @apply outline-none; + background-color: var(--white); + &.base{ + width: 20.4rem; + padding: 0.8rem 1.6rem; + } + &.large{ + width: 33.75rem; + padding: 0.8rem 1.6rem; + } + &:hover{ + background-color: var(--gray); + } + &.isChoose{ + background-color: var(--gray); + } +} \ No newline at end of file diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.tsx b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx new file mode 100644 index 000000000..863057f1f --- /dev/null +++ b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx @@ -0,0 +1,28 @@ +import s from './SelectOption.module.scss' +import classNames from 'classnames' +import { useState } from 'react' + +interface Props{ + onClick: (name: string, value: string) => void, + itemName: string, + size: 'base' | 'large', + value: string, + selected?: boolean, +} + +const SelectOption = ({onClick, itemName, size, value, selected} : Props) => { + const changeName = () => { + onClick(itemName, value) + } + return( +
{itemName}
+ ) +} + +export default SelectOption \ No newline at end of file diff --git a/src/components/icons/IconVectorDown.tsx b/src/components/icons/IconVectorDown.tsx new file mode 100644 index 000000000..0bb1cb8c1 --- /dev/null +++ b/src/components/icons/IconVectorDown.tsx @@ -0,0 +1,19 @@ +const IconVectorDown = ({ ...props }) => { + return ( + + + + ) + } + + export default IconVectorDown \ No newline at end of file diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 02b4947cb..58f525a3c 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -15,3 +15,4 @@ export { default as IconApple } from './IconApple' export { default as ArrowLeft } from './ArrowLeft' export { default as ArrowRight } from './ArrowRight' export { default as Close } from './Close' +export { default as IconVectorDown} from './IconVectorDown' \ No newline at end of file From fc39eb17589c9bb3449b60a5829594f04342ccfb Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 17:06:06 +0700 Subject: [PATCH 04/17] :art: styles: cart drawer :%s --- next.config.js | 4 ++ .../common/CartDrawer/CartDrawer.module.scss | 12 ++++ .../common/CartDrawer/CartDrawer.tsx | 35 +++++++++++ .../CartCheckoutButton.module.scss | 6 ++ .../CartCheckoutButton/CartCheckoutButton.tsx | 13 ++++ .../CartMessage/CartMessage.module.scss | 15 +++++ .../components/CartMessage/CartMessage.tsx | 18 ++++++ .../CartRecommendation.module.scss | 25 ++++++++ .../CartRecommendation/CartRecommendation.tsx | 43 +++++++++++++ .../ProductCartItem.module.scss | 50 +++++++++++++++ .../ProductCartItem/ProductCartItem.tsx | 56 +++++++++++++++++ .../ProductsInCart/ProductsInCart.module.scss | 5 ++ .../ProductsInCart/ProductsInCart.tsx | 28 +++++++++ .../DrawerCommon/DrawerCommon.module.scss | 7 ++- .../ImgWithLink/ImgWithLink.module.scss | 9 ++- .../common/ImgWithLink/ImgWithLink.tsx | 6 +- src/components/common/Layout/Layout.tsx | 5 +- .../ListProductWithInfo.module.scss | 2 +- src/components/common/index.ts | 1 + src/components/icons/IconDelete.tsx | 11 ++++ src/components/icons/index.ts | 1 + src/styles/_base.scss | 3 +- src/styles/_utilities.scss | 19 ++++++ src/utils/demo-data.ts | 61 +++++++++++++++++++ src/utils/types.utils.ts | 7 ++- tailwind.config.js | 1 + 26 files changed, 431 insertions(+), 12 deletions(-) create mode 100644 src/components/common/CartDrawer/CartDrawer.module.scss create mode 100644 src/components/common/CartDrawer/CartDrawer.tsx create mode 100644 src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss create mode 100644 src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx create mode 100644 src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss create mode 100644 src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx create mode 100644 src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss create mode 100644 src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx create mode 100644 src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss create mode 100644 src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx create mode 100644 src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss create mode 100644 src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx create mode 100644 src/components/icons/IconDelete.tsx diff --git a/next.config.js b/next.config.js index 515b2ae7c..d3ad64f4a 100644 --- a/next.config.js +++ b/next.config.js @@ -13,6 +13,10 @@ const isVendure = provider === 'vendure' module.exports = withCommerceConfig({ commerce, + images: { + // todo: replace domains for images + domains: ['user-images.githubusercontent.com'], + }, i18n: { locales: ['en-US', 'es'], defaultLocale: 'en-US', diff --git a/src/components/common/CartDrawer/CartDrawer.module.scss b/src/components/common/CartDrawer/CartDrawer.module.scss new file mode 100644 index 000000000..126028d3c --- /dev/null +++ b/src/components/common/CartDrawer/CartDrawer.module.scss @@ -0,0 +1,12 @@ +@import '../../../styles/utilities'; + + +.cartDrawer { + @apply flex flex-col h-full; + .body { + @apply overflow-y-auto overflow-x-hidden h-full custom-scroll; + } + .bottom { + padding-top: 1.6rem; + } +} \ No newline at end of file diff --git a/src/components/common/CartDrawer/CartDrawer.tsx b/src/components/common/CartDrawer/CartDrawer.tsx new file mode 100644 index 000000000..0a432bb65 --- /dev/null +++ b/src/components/common/CartDrawer/CartDrawer.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data'; +import { DrawerCommon } from '..'; +import s from './CartDrawer.module.scss'; +import CartCheckoutButton from './components/CartCheckoutButton/CartCheckoutButton'; +import CartMessage from './components/CartMessage/CartMessage'; +import CartRecommendation from './components/CartRecommendation/CartRecommendation'; +import ProductsInCart from './components/ProductsInCart/ProductsInCart'; + +interface Props { + visible: boolean + onClose: () => void +} + +const CartDrawer = ({ visible, onClose }: Props) => { + return ( + +
+
+ + +
+
+ + +
+
+ + ) +} + +export default CartDrawer; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss new file mode 100644 index 000000000..3f90bffbd --- /dev/null +++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss @@ -0,0 +1,6 @@ +.cartCheckoutButton { + padding: 1.6rem; + button { + width: 100%; + } +} diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx new file mode 100644 index 000000000..0cd7d00a2 --- /dev/null +++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx @@ -0,0 +1,13 @@ +import React, { memo } from 'react'; +import { ButtonCommon } from 'src/components/common'; +import s from './CartCheckoutButton.module.scss'; + +const CartCheckoutButton = memo(() => { + return ( +
+ Check out - Rp 120.500 +
+ ) +}) + +export default CartCheckoutButton; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss new file mode 100644 index 000000000..18d6f96cc --- /dev/null +++ b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss @@ -0,0 +1,15 @@ +@import "../../../../../styles/utilities"; + +.cartMessage { + @apply flex bg-info; + padding: 1.2rem 1.6rem; + .text { + font-weight: bold; + margin-right: 0.8rem; + } + .icon { + svg path { + fill: var(--text-placeholder); + } + } +} diff --git a/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx b/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx new file mode 100644 index 000000000..2cc85fb49 --- /dev/null +++ b/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx @@ -0,0 +1,18 @@ +import React, { memo } from 'react'; +import { IconInfo } from 'src/components/icons'; +import s from './CartMessage.module.scss'; + +const CartMessage = memo(() => { + return ( +
+
+ You save - Rp 150 +
+
+ +
+
+ ) +}) + +export default CartMessage; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss new file mode 100644 index 000000000..5b1a5ffa6 --- /dev/null +++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss @@ -0,0 +1,25 @@ +@import '../../../../../styles/utilities'; + +.cartRecommendation { + @apply w-full bg-background-gray; + .top { + @apply flex justify-between items-center; + padding: 1.6rem; + .heading { + @apply font-bold text-active sm-headline; + } + } + .productCardWarpper { + padding-left: 1.6rem; + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem - 2rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem - 2rem); + } + } + } + } +} diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx new file mode 100644 index 000000000..bbc40647e --- /dev/null +++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx @@ -0,0 +1,43 @@ +import { TOptionsEvents } from 'keen-slider'; +import React from 'react'; +import { CarouselCommon, ViewAllItem } from 'src/components/common'; +import ProductCard, { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'; +import { ROUTE } from 'src/utils/constanst.utils'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; +import s from './CartRecommendation.module.scss'; + +const option: TOptionsEvents = { + slidesPerView: 2, + mode: 'free', + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 1, + }, + '(min-width: 768px)': { + slidesPerView: 2.5, + } + }, +} + +const CartRecommendation = () => { + return ( +
+
+
+ Recommendation +
+ +
+
+ + data={PRODUCT_DATA_TEST} + Component={ProductCard} + itemKey="cart-recommendation" + option={option} + /> +
+
+ ) +} + +export default CartRecommendation; diff --git a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss new file mode 100644 index 000000000..e8bd0e3ec --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss @@ -0,0 +1,50 @@ +@import "../../../../../styles/utilities"; + +.productCartItem { + @apply grid; + grid-template-columns: 2fr 1fr; + padding-bottom: 1.6rem; + padding-top: 1.6rem; + border-bottom: 1px solid var(--border-line); + .info { + @apply flex; + .imgWrap { + width: 11rem; + height: 7.5rem; + margin-right: 1.6rem; + img { + object-fit: contain; + } + } + .detail { + min-height: 9rem; + .price { + margin-top: 0.8rem; + .old { + margin-bottom: 0.8rem; + .number { + margin-right: 0.8rem; + color: var(--text-label); + text-decoration: line-through; + } + } + .current { + @apply text-active font-bold sm-headline; + } + } + } + } + + .actions { + @apply flex flex-col justify-between items-end; + margin-left: 1.6rem; + .iconDelete { + @apply cursor-pointer; + &:hover { + svg path { + fill: var(--negative); + } + } + } + } +} diff --git a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx new file mode 100644 index 000000000..7ec3ecbdb --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import Link from 'next/link' +import { QuanittyInput } from 'src/components/common'; +import { IconDelete } from 'src/components/icons'; +import { ROUTE } from 'src/utils/constanst.utils'; +import { ProductProps } from 'src/utils/types.utils'; +import ImgWithLink from '../../../ImgWithLink/ImgWithLink'; +import LabelCommon from '../../../LabelCommon/LabelCommon'; +import s from './ProductCartItem.module.scss'; + +export interface ProductCartItempProps extends ProductProps { + quantity: number, +} + +const ProductCartItem = ({ name, slug, weight, price, oldPrice, discount, imageSrc, quantity }: ProductCartItempProps) => { + return ( +
+
+ + +
+ +
+ + +
+ + +
+ {name} {weight ? `(${weight})` : ''} +
+ + +
+ { + oldPrice && +
+ {oldPrice} + {discount} +
+ } +
{price}
+
+
+
+
+
+ +
+ +
+
+ ) +} + +export default ProductCartItem; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss new file mode 100644 index 000000000..96df763b8 --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss @@ -0,0 +1,5 @@ + +.productsInCart { + padding: 1.6rem 1.6rem 0 1.6rem; + margin-bottom: -1px; +} \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx new file mode 100644 index 000000000..5eddc1c25 --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import ProductCartItem, { ProductCartItempProps } from '../ProductCartItem/ProductCartItem'; +import s from './ProductsInCart.module.scss'; + +interface Props { + data: ProductCartItempProps[] +} + +const ProductsInCart = ({ data }: Props) => { + return ( +
+ { + data.map(item => ) + } +
+ ) +} + +export default ProductsInCart; \ No newline at end of file diff --git a/src/components/common/DrawerCommon/DrawerCommon.module.scss b/src/components/common/DrawerCommon/DrawerCommon.module.scss index fc9de8a8a..18d992741 100644 --- a/src/components/common/DrawerCommon/DrawerCommon.module.scss +++ b/src/components/common/DrawerCommon/DrawerCommon.module.scss @@ -2,6 +2,7 @@ .drawerCommon { @apply fixed flex justify-end transition-all duration-200; + overflow: hidden; top: 0; right: 0; height: 100vh; @@ -13,12 +14,15 @@ } .inner { - @apply bg-white; + @apply flex flex-col bg-white; width: fit-content; height: 100vh; min-width: 48rem; width: 100%; margin-right: 0; + @screen md { + max-width: 50rem; + } .top { @apply flex justify-between items-center; padding: 1.6rem; @@ -37,6 +41,7 @@ } .content { overflow-y: auto; + height: 100%; } &.hide { transform: translateX(110%); diff --git a/src/components/common/ImgWithLink/ImgWithLink.module.scss b/src/components/common/ImgWithLink/ImgWithLink.module.scss index b1587bfa6..413f96cdb 100644 --- a/src/components/common/ImgWithLink/ImgWithLink.module.scss +++ b/src/components/common/ImgWithLink/ImgWithLink.module.scss @@ -1,4 +1,9 @@ .imgWithLink { - @apply w-full h-full; - object-fit: cover; + position: relative; + min-width: 5rem; + width: 100%; + height: 100%; + img { + object-fit: cover; + } } diff --git a/src/components/common/ImgWithLink/ImgWithLink.tsx b/src/components/common/ImgWithLink/ImgWithLink.tsx index 43ac1caa6..092322085 100644 --- a/src/components/common/ImgWithLink/ImgWithLink.tsx +++ b/src/components/common/ImgWithLink/ImgWithLink.tsx @@ -1,5 +1,6 @@ import React from 'react' import s from './ImgWithLink.module.scss' +import Image from 'next/image' export interface ImgWithLinkProps { src: string, @@ -8,8 +9,9 @@ export interface ImgWithLinkProps { const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => { return ( - {alt} - +
+ {alt} +
) } diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index e7190f404..ea09855ff 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' import { useModalCommon } from 'src/components/hooks' -import { DrawerCommon, ScrollToTop } from '..' +import { CartDrawer } from '..' import Footer from '../Footer/Footer' import Header from '../Header/Header' import s from './Layout.module.scss' @@ -30,8 +30,7 @@ const Layout: FC = ({ children }) => {
{children}
-