crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-04 04:01:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 styles: recipe ingradients

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-09-01 17:36:49 +07:00
parent 6169634dca
commit 9cc2d2ffc4
16 changed files with 274 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pages/demo.tsx
View File

@ -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}/>
</>
}

0
src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss Normal file
View File

18
src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx Normal file
View File

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

5
src/components/common/ProductCard/ProductCard.module.scss
View File

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

9
src/components/common/ProductCard/ProductCard.tsx
View File

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

27
src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss Normal file
View File

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

28
src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx Normal file
View File

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

62
src/components/common/RecipeDetail/RecipeDetail.module.scss
View File

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

52
src/components/common/RecipeDetail/RecipeDetail.tsx
View File

@ -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}>
<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>
<RecipeDetailInfo />
<RecipeIngredient data={ingredients} />
</section >
)
}

62
src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss Normal file
View File

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

59
src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx Normal file
View File

@ -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

18
src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss Normal file
View File

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

33
src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx Normal file
View File

@ -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

1
src/styles/_base.scss
View File

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

5
src/styles/_utilities.scss
View File

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

1
src/utils/types.utils.ts
View File

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