feat: ProductCollection HomeRecipe

:%s
This commit is contained in:
unknown
2021-08-26 18:24:27 +07:00
parent 95b890f2cc
commit 880fa6c980
12 changed files with 210 additions and 14 deletions

View File

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

View File

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

View File

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

View 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

View File

@@ -1 +1,2 @@
export { default as HomeBanner } from './HomeBanner/HomeBanner'
export { default as CollectionCarcoucel } from './CollectionCarcoucel/CollectionCarcoucel'