mirror of
https://github.com/vercel/commerce.git
synced 2025-07-21 11:51:20 +00:00
🎨 styles: recommended recipe
:%s
This commit is contained in:
lytrankieio123
parent
2a0e742332
commit
8712ae717d
@ -1,13 +1,15 @@
|
||||
import { Layout, RecipeDetail } from 'src/components/common';
|
||||
import { ProductInfoDetail, ViewedProducts } from 'src/components/modules/product-detail';
|
||||
import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
|
||||
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 <>
|
||||
<ProductInfoDetail />
|
||||
<RecipeDetail ingredients={PRODUCT_DATA_TEST}/>
|
||||
<RecipeDetail ingredients={INGREDIENT_DATA_TEST}/>
|
||||
<RecommendedRecipes data={RECIPE_DATA_TEST}/>
|
||||
<ReleventProducts/>
|
||||
<ViewedProducts/>
|
||||
</>
|
||||
}
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
@import "../../../../../styles/utilities";
|
||||
|
||||
.recipeIngredient {
|
||||
margin: 5.6rem auto;
|
||||
margin: 6rem auto;
|
||||
@screen md {
|
||||
margin: 5.6rem auto;
|
||||
}
|
||||
.top {
|
||||
@apply flex justify-between items-center spacing-horizontal;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<div className={s.recommendedRecipes}>
|
||||
<div className={s.infoProducts}>
|
||||
<HeadingCommon>Recommended Recipes</HeadingCommon>
|
||||
<ViewAllItem link={ROUTE.RECIPES} />
|
||||
</div>
|
||||
<div className={s.productsWrap}>
|
||||
<CarouselCommon<RecipeCardProps>
|
||||
data={data}
|
||||
Component={RecipeCard}
|
||||
itemKey="Recommended Recipes"
|
||||
option={OPTION_DEFAULT}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecommendedRecipes;
|
||||
@ -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 (
|
||||
<ListProductWithInfo
|
||||
title="Relevant Products"
|
||||
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
|
||||
data={PRODUCT_DATA_TEST}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReleventProducts;
|
||||
@ -1,2 +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'
|
||||
|
||||
@ -10,6 +10,7 @@ export const ROUTE = {
|
||||
PRODUCTS: '/products',
|
||||
ABOUT: '/about',
|
||||
ACCOUNT: '/account',
|
||||
RECIPES: '/recipes',
|
||||
|
||||
BUSSINESS: '/bussiness',
|
||||
CONTACT: '/contact',
|
||||
|
||||
@ -1,4 +1,65 @@
|
||||
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',
|
||||
@ -58,3 +119,36 @@ export const PRODUCT_DATA_TEST = [
|
||||
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'
|
||||
},
|
||||
]
|
||||
Loading…
x
Reference in New Issue
Block a user