🎨 styles: recipe ingradients

:%s

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 <>
         <ProductInfoDetail />
-        <RecipeDetail />
+        <RecipeDetail ingredients={PRODUCT_DATA_TEST}/>
     </>
 }
 

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 (
+        <div>
+            InfoProducts
+            {title}
+        </div>
+    );
+};
+
+export default InfoProducts;

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;

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 <div className={`${s.productCardWarpper} ${s.notSell}`}>
+      <ProductNotSell name={name} imageSrc={imageSrc} />
+    </div>
+
+  }
+
   return (
     <div className={s.productCardWarpper}>
       <div className={s.cardTop}>

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;
+    }
+}

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 (
+        <>
+            <div className={s.imgWrap}>
+                <ImgWithLink src={imageSrc} alt={name} />
+            </div>
+            <div className={s.name}>{name}</div>
+            <div className={s.info}>
+                <IconInfo />
+                <div className={s.text}>
+                    Not Sell
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ProductNotSell;

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;
-                }
-            }
-        }
-    }
-}

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 (
         <section className={s.recipeDetail}>
-            <div className={s.img}>
+            <RecipeDetailInfo />
-                <img src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
+            <RecipeIngredient data={ingredients} />
-            </div>
-            <div className={s.recipeInfo}>
-                <div className={s.top}>
-                    <h1 className={s.name}>
-                        Crispy Fried  Calamari
-                    </h1>
-                    <RecipeBriefInfo />
-                </div>
-                <div className={s.detail}>
-                    <div className={s.item}>
-                        <h3 className={s.heading}>Ingredients</h3>
-                        <ul className={s.content}>
-                            <li>Canola oil for frying</li>
-                            <li>1 pound clean squid bodies cut in 1/4 inch rings and dried with a paper towel</li>
-                            <li>2 cups flour</li>
-                            <li>1/2 teaspoon kosher salt</li>
-                            <li>1/2 teaspoon garlic powder</li>
-                            <li>1/8 teaspoon coarse ground black pepper</li>
-                            <li>1 lemon cut into wedges</li>
-                        </ul>
-                    </div>
-
-                    <div className={s.item}>
-                        <h3 className={s.heading}>Preparation</h3>
-                        <ul className={s.content}>
-                            <li>1In a large pot or dutch oven add three inches of oil and bring to 350 degrees.</li>
-                            <li>Add the flour, salt, garlic powder and pepper to a large bowl and stir to combine.</li>
-                            <li>Toss the squid pieces in the flour then into the hot oil.</li>
-                            <li>Fry the squid for 1-2 minutes. You want the color to stay pale like in the pictures.</li>
-                            <li>Remove to a cookie sheet to drain (do not add paper towels as it will steam the calamari and make it soft.)</li>
-                            <li>Serve with lemon wedges.</li>
-                        </ul>
-                    </div>
-                    <div className={s.item}>
-                        <h3 className={s.heading}>Link</h3>
-                        <a href="https://dinnerthendessert.com/crispy-fried-calamari" target="_blank" rel="noopener noreferrer">https://dinnerthendessert.com/crispy-fried-calamari</a>
-                    </div>
-                </div>
-            </div>
         </section >
     )
 }

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;
+                }
+            }
+        }
+    }
+}

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 (
+        <section className={s.recipeDetailInfo}>
+            <div className={s.img}>
+                <img src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
+            </div>
+            <div className={s.recipeInfo}>
+                <div className={s.top}>
+                    <h1 className={s.name}>
+                        Crispy Fried  Calamari
+                    </h1>
+                    <RecipeBriefInfo />
+                </div>
+                <div className={s.detail}>
+                    <div className={s.item}>
+                        <h3 className={s.heading}>Ingredients</h3>
+                        <ul className={s.content}>
+                            <li>Canola oil for frying</li>
+                            <li>1 pound clean squid bodies cut in 1/4 inch rings and dried with a paper towel</li>
+                            <li>2 cups flour</li>
+                            <li>1/2 teaspoon kosher salt</li>
+                            <li>1/2 teaspoon garlic powder</li>
+                            <li>1/8 teaspoon coarse ground black pepper</li>
+                            <li>1 lemon cut into wedges</li>
+                        </ul>
+                    </div>
+
+                    <div className={s.item}>
+                        <h3 className={s.heading}>Preparation</h3>
+                        <ul className={s.content}>
+                            <li>1In a large pot or dutch oven add three inches of oil and bring to 350 degrees.</li>
+                            <li>Add the flour, salt, garlic powder and pepper to a large bowl and stir to combine.</li>
+                            <li>Toss the squid pieces in the flour then into the hot oil.</li>
+                            <li>Fry the squid for 1-2 minutes. You want the color to stay pale like in the pictures.</li>
+                            <li>Remove to a cookie sheet to drain (do not add paper towels as it will steam the calamari and make it soft.)</li>
+                            <li>Serve with lemon wedges.</li>
+                        </ul>
+                    </div>
+                    <div className={s.item}>
+                        <h3 className={s.heading}>Link</h3>
+                        <a href="https://dinnerthendessert.com/crispy-fried-calamari" target="_blank" rel="noopener noreferrer">https://dinnerthendessert.com/crispy-fried-calamari</a>
+                    </div>
+                </div>
+            </div>
+        </section >
+    )
+}
+
+export default RecipeDetailInfo

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;
+            }
+        }
+    }
+}

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 (
+        <section className={s.recipeIngredient}>
+            <div className={s.top}>
+                <HeadingCommon>Ingredients</HeadingCommon>
+                <div>
+                    <ViewAllItem link={ROUTE.PRODUCTS} />
+                </div>
+            </div>
+            <ProductCarousel data={data} itemKey="recipe-ingredient" />
+            <div className={s.bottom}>
+                <ButtonCommon type='ghost' size='large'>Buy all</ButtonCommon>
+            </div>
+        </section>
+    )
+}
+
+export default RecipeIngredient

src/styles/_base.scss

@@ -80,5 +80,4 @@ html {
 
 a {
   -webkit-tap-highlight-color: var(--primary);
-  color: var(--primary);
 }

src/styles/_utilities.scss

@@ -137,4 +137,9 @@
             }
         }
     }
+
+    .u-icon {
+        width: 2rem;
+        height: 2rem;
+    }
 }

src/utils/types.utils.ts

@@ -4,6 +4,7 @@ export interface ProductProps {
     weight: string
     price: string
     imageSrc: string
+    isNotSell?: boolean
 }
 
 export interface FeaturedProductProps {