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

🎨 styles: recipe detail

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-09-14 14:14:00 +07:00
parent b3b5a310d8
commit 9802a6537a
8 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss
View File

@@ -1,27 +0,0 @@
@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);
}
}
}
}
}
}

51
src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx
View File

@@ -1,51 +0,0 @@
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;

1
src/components/modules/product-detail/index.ts
View File

@@ -1,4 +1,3 @@
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'