mirror of
https://github.com/vercel/commerce.git
synced 2025-07-24 10:41:23 +00:00
✨ feat: ProductCollection HomeRecipe
:%s
This commit is contained in:
@@ -0,0 +1,12 @@
|
||||
@import '../../../../styles/utilities';
|
||||
.colectionCarcoucelWarpper {
|
||||
padding-top: 5.6rem;
|
||||
padding-bottom: 6.5rem;
|
||||
@apply flex flex-col ;
|
||||
.top {
|
||||
@apply spacing-horizontal flex w-full justify-between;
|
||||
.right{
|
||||
margin-right: 14.76;
|
||||
}
|
||||
}
|
||||
}
|
@@ -0,0 +1,36 @@
|
||||
import React from 'react'
|
||||
import { CollectionHeading, ProductCaroucel, ViewAllItem } from 'src/components/common'
|
||||
import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
|
||||
import s from './CollectionCarcoucel.module.scss'
|
||||
interface ColectionCarcoucelProps {
|
||||
data: ProductCardProps[]
|
||||
itemKey: string
|
||||
title: string
|
||||
subTitle: string
|
||||
viewAllLink?: string
|
||||
}
|
||||
|
||||
const ColectionCarcoucel = ({
|
||||
data,
|
||||
itemKey,
|
||||
title,
|
||||
subTitle,
|
||||
}: ColectionCarcoucelProps) => {
|
||||
return (
|
||||
<div className={s.colectionCarcoucelWarpper}>
|
||||
<div className={s.top}>
|
||||
<div className={s.left}>
|
||||
<CollectionHeading headingText={title} subtitle={subTitle} />
|
||||
</div>
|
||||
<div className={s.right}>
|
||||
<ViewAllItem/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.bot}>
|
||||
<ProductCaroucel data={data} itemKey={itemKey} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ColectionCarcoucel
|
@@ -0,0 +1,33 @@
|
||||
@import '../../../../styles/utilities';
|
||||
|
||||
.homeRecipeWarpper {
|
||||
padding-top: 5.6rem;
|
||||
padding-bottom: 6.5rem;
|
||||
@apply flex flex-col;
|
||||
.top {
|
||||
@apply spacing-horizontal flex w-full justify-between;
|
||||
.right {
|
||||
margin-right: 14.76;
|
||||
}
|
||||
}
|
||||
.mid{
|
||||
padding-top: 3.2rem;
|
||||
padding-bottom: 3.2rem;
|
||||
@apply flex justify-start spacing-horizontal;
|
||||
.tab{
|
||||
padding: 1.6rem 1.6rem 0.8rem 1.6rem;
|
||||
font-size: 3.2rem;
|
||||
line-height: 4rem;
|
||||
outline: none;
|
||||
&.active{
|
||||
@apply text-background custom-border-radius bg-primary;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// :global(.keen-slider__slide){
|
||||
// @screen 2xl{
|
||||
// margin-right: 2rem;
|
||||
// }
|
||||
// }
|
||||
}
|
37
src/components/modules/home/HomeRecipe/HomeRecipe.tsx
Normal file
37
src/components/modules/home/HomeRecipe/HomeRecipe.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import React from 'react'
|
||||
import { HeadingCommon, ViewAllItem } from 'src/components/common'
|
||||
import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'
|
||||
import RecipeCaroucel from 'src/components/common/RecipeCaroucel/RecipeCaroucel'
|
||||
import s from './HomeRecipe.module.scss'
|
||||
import classNames from 'classnames';
|
||||
interface HomeRecipeProps {
|
||||
data: RecipeCardProps[]
|
||||
itemKey: string
|
||||
title: string
|
||||
viewAllLink?: string
|
||||
}
|
||||
|
||||
const HomeRecipe = ({ data, itemKey, title }: HomeRecipeProps) => {
|
||||
return (
|
||||
<div className={s.homeRecipeWarpper}>
|
||||
<div className={s.top}>
|
||||
<div className={s.left}>
|
||||
<HeadingCommon headingText={title} />
|
||||
</div>
|
||||
<div className={s.right}>
|
||||
<ViewAllItem />
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.mid}>
|
||||
<button className={classNames(s.tab,s.active)}>Noodle</button>
|
||||
<button className={s.tab}>Curry</button>
|
||||
<button className={s.tab}>Special Recipes</button>
|
||||
</div>
|
||||
<div className={s.bot}>
|
||||
<RecipeCaroucel data={data} itemKey={itemKey} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomeRecipe
|
@@ -1 +1,2 @@
|
||||
export { default as HomeBanner } from './HomeBanner/HomeBanner'
|
||||
export { default as CollectionCarcoucel } from './CollectionCarcoucel/CollectionCarcoucel'
|
||||
|
Reference in New Issue
Block a user