From 9cc2d2ffc49dc34524cb2aa9201d32327cc6e944 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 1 Sep 2021 17:36:49 +0700 Subject: [PATCH] :art: styles: recipe ingradients :%s --- pages/demo.tsx | 5 +- .../InfoProducts/InfoProducts.module.scss | 0 .../InfoProducts/InfoProducts.tsx | 18 ++++++ .../ProductCard/ProductCard.module.scss | 5 +- .../common/ProductCard/ProductCard.tsx | 9 +++ .../ProductNotSell/ProductNotSell.module.scss | 27 ++++++++ .../ProductNotSell/ProductNotSell.tsx | 28 +++++++++ .../RecipeDetail/RecipeDetail.module.scss | 62 ------------------- .../common/RecipeDetail/RecipeDetail.tsx | 52 +++------------- .../RecipeDetailInfo.module.scss | 62 +++++++++++++++++++ .../RecipeDetailInfo/RecipeDetailInfo.tsx | 59 ++++++++++++++++++ .../RecipeIngredient.module.scss | 18 ++++++ .../RecipeIngredient/RecipeIngredient.tsx | 33 ++++++++++ src/styles/_base.scss | 1 - src/styles/_utilities.scss | 5 ++ src/utils/types.utils.ts | 1 + 16 files changed, 274 insertions(+), 111 deletions(-) create mode 100644 src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss create mode 100644 src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx create mode 100644 src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss create mode 100644 src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx create mode 100644 src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss create mode 100644 src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx create mode 100644 src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss create mode 100644 src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx diff --git a/pages/demo.tsx b/pages/demo.tsx index 5ca1c8040..81714a811 100644 --- a/pages/demo.tsx +++ b/pages/demo.tsx @@ -1,12 +1,13 @@ import { Layout, RecipeDetail } from 'src/components/common'; -import { ProductInfoDetail } from 'src/components/modules/product-detail' +import { ProductInfoDetail } from 'src/components/modules/product-detail'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; export default function Demo() { return <> - + } diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx new file mode 100644 index 000000000..30ef3bca8 --- /dev/null +++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + + +interface Props { + title: string, + subtitle?: string, +} + +const InfoProducts = ({ title, subtitle }: Props) => { + return ( +
+ InfoProducts + {title} +
+ ); +}; + +export default InfoProducts; \ No newline at end of file diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss index 97dce1794..8f9c5e73f 100644 --- a/src/components/common/ProductCard/ProductCard.module.scss +++ b/src/components/common/ProductCard/ProductCard.module.scss @@ -4,6 +4,9 @@ padding: 1.2rem 1.2rem 0 1.2rem; margin-bottom: 1px; @apply flex flex-col justify-between; + &.notSell { + @apply justify-center; + } .cardTop{ @apply relative; height: 13.8rem; @@ -29,8 +32,6 @@ .cardMidTop{ .productname{ font-weight: bold; - line-height: 2.4rem; - font-size: 1.6rem; color: var(--text-active); &:hover{ cursor: pointer; diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx index 7d94be6bc..4f1e3b329 100644 --- a/src/components/common/ProductCard/ProductCard.tsx +++ b/src/components/common/ProductCard/ProductCard.tsx @@ -6,6 +6,7 @@ import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy' import ItemWishList from '../ItemWishList/ItemWishList' import LabelCommon from '../LabelCommon/LabelCommon' import s from './ProductCard.module.scss' +import ProductNotSell from './ProductNotSell/ProductNotSell' export interface ProductCardProps extends ProductProps { buttonText?: string @@ -18,7 +19,15 @@ const ProductCard = ({ price, buttonText = 'Buy Now', imageSrc, + isNotSell, }: ProductCardProps) => { + if (isNotSell) { + return
+ +
+ + } + return (
diff --git a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss new file mode 100644 index 000000000..4945220a9 --- /dev/null +++ b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss @@ -0,0 +1,27 @@ +@import "../../../../styles/utilities"; + +.imgWrap { + img { + opacity: 0.5; + } +} + +.name { + @apply text-label cursor-default font-bold; +} + +.info { + @apply flex justify-center items-center custom-border-radius bg-info-light text-center; + padding: .8rem 1.6rem; + margin-top: 1.6rem; + color: var(--info); + svg { + @apply u-icon; + path { + fill: currentColor; + } + } + .text { + margin-left: 0.8rem; + } +} diff --git a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx new file mode 100644 index 000000000..f87d87c43 --- /dev/null +++ b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { IconInfo } from 'src/components/icons'; +import ImgWithLink from '../../ImgWithLink/ImgWithLink'; +import s from './ProductNotSell.module.scss'; + +export interface Props { + name: string, + imageSrc: string, +} + +const ProductNotSell = ({ name, imageSrc }: Props) => { + return ( + <> +
+ +
+
{name}
+
+ +
+ Not Sell +
+
+ + ); +}; + +export default ProductNotSell; \ No newline at end of file diff --git a/src/components/common/RecipeDetail/RecipeDetail.module.scss b/src/components/common/RecipeDetail/RecipeDetail.module.scss index 64c8db389..e69de29bb 100644 --- a/src/components/common/RecipeDetail/RecipeDetail.module.scss +++ b/src/components/common/RecipeDetail/RecipeDetail.module.scss @@ -1,62 +0,0 @@ -@import "../../../styles/utilities"; - -.recipeDetail { - @apply spacing-horizontal; - margin: 5.6rem auto; - @screen md { - @apply flex; - } - .img { - width: fit-content; - margin: auto; - margin-top: 0; - - @screen sm-only { - margin-bottom: 2rem; - } - @screen lg { - max-width: 60rem; - } - img { - @apply w-full; - object-fit: contain; - max-height: 64rem; - border-radius: 2.4rem; - @screen md { - max-height: 90rem; - } - } - } - - .recipeInfo { - @screen md { - max-width: 39rem; - margin-left: 4.8rem; - } - @screen lg { - margin-left: 11.2rem; - } - .top { - margin-bottom: 4.8rem; - .name { - @apply heading-1 font-heading; - margin-bottom: 1.6rem; - } - } - .detail { - .item { - &:not(:last-child) { - margin-bottom: 2.4rem; - } - .heading { - @apply heading-3 font-heading; - margin-bottom: 0.8rem; - } - .content { - list-style: disc; - margin-left: 2rem; - } - } - } - } -} diff --git a/src/components/common/RecipeDetail/RecipeDetail.tsx b/src/components/common/RecipeDetail/RecipeDetail.tsx index 715c61ed2..cdec99994 100644 --- a/src/components/common/RecipeDetail/RecipeDetail.tsx +++ b/src/components/common/RecipeDetail/RecipeDetail.tsx @@ -1,57 +1,21 @@ import React from 'react' -import RecipeBriefInfo from './components/RecipeBriefInfo/RecipeBriefInfo' +import { ProductCardProps } from '../ProductCard/ProductCard' +import RecipeDetailInfo from './components/RecipeDetailInfo/RecipeDetailInfo' +import RecipeIngredient from './components/RecipeIngredient/RecipeIngredient' import s from './RecipeDetail.module.scss' interface Props { className?: string - children?: any + children?: any, + ingredients: ProductCardProps[], } -const RecipeDetail = ({ }: Props) => { +const RecipeDetail = ({ ingredients }: Props) => { return (
-
- Recipe -
-
-
-

- Crispy Fried Calamari -

- -
-
-
-

Ingredients

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

Preparation

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

+ Crispy Fried Calamari +

+ +
+
+
+

Ingredients

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

Preparation

+
    +
  • 1In a large pot or dutch oven add three inches of oil and bring to 350 degrees.
    • +
  • Add the flour, salt, garlic powder and pepper to a large bowl and stir to combine.
    • +
  • Toss the squid pieces in the flour then into the hot oil.
    • +
  • Fry the squid for 1-2 minutes. You want the color to stay pale like in the pictures.
    • +
  • Remove to a cookie sheet to drain (do not add paper towels as it will steam the calamari and make it soft.)
    • +
  • Serve with lemon wedges.
    • +
+
+ +
+
+
+ ) +} + +export default RecipeDetailInfo diff --git a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss new file mode 100644 index 000000000..ba4bcd2e7 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss @@ -0,0 +1,18 @@ +@import "../../../../../styles/utilities"; + +.recipeIngredient { + margin: 5.6rem auto; + .top { + @apply flex justify-between items-center spacing-horizontal; + } + .bottom { + @apply flex justify-center items-center spacing-horizontal; + margin-top: 4rem; + button { + width: 100%; + @screen md { + width: 39rem; + } + } + } +} diff --git a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx new file mode 100644 index 000000000..a879f0b72 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import ButtonCommon from 'src/components/common/ButtonCommon/ButtonCommon' +import HeadingCommon from 'src/components/common/HeadingCommon/HeadingCommon' +import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard' +import ProductCarousel from 'src/components/common/ProductCarousel/ProductCarousel' +import ViewAllItem from 'src/components/common/ViewAllItem/ViewAllItem' +import { ROUTE } from 'src/utils/constanst.utils' +import s from './RecipeIngredient.module.scss' + +interface Props { + className?: string + children?: any, + data: ProductCardProps[], +} + +const RecipeIngredient = ({ data }: Props) => { + return ( +
+
+ Ingredients +
+ +
+
+ +
+ Buy all +
+
+ ) +} + +export default RecipeIngredient diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 339db22d2..e90a6434f 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -80,5 +80,4 @@ html { a { -webkit-tap-highlight-color: var(--primary); - color: var(--primary); } diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 26cea17c0..56f9494ec 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -137,4 +137,9 @@ } } } + + .u-icon { + width: 2rem; + height: 2rem; + } } diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts index 2c99df73a..3d2383495 100644 --- a/src/utils/types.utils.ts +++ b/src/utils/types.utils.ts @@ -4,6 +4,7 @@ export interface ProductProps { weight: string price: string imageSrc: string + isNotSell?: boolean } export interface FeaturedProductProps {