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

🔨 refactor: reponsive

Browse Source 
:%s
This commit is contained in:
unknown
2021-08-27 10:31:16 +07:00
parent 9ff88adb08
commit f612256f8c
16 changed files with 3791 additions and 3752 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.module.scss
View File

@@ -1,12 +1,14 @@
@import '../../../../styles/utilities';
.colectionCarcoucelWarpper {
padding-top: 5.6rem;
padding-bottom: 6.5rem;
@apply flex flex-col ;
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;
}
@apply spacing-horizontal flex w-full justify-between;
@screen xl {
.right {
margin-right: 2.476rem;
}
}
}
}

13
src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx
View File

@@ -4,13 +4,12 @@ import {
ProductCaroucel,
ViewAllItem,
} from 'src/components/common'
import { CollectionHeadingProps } from 'src/components/common/CollectionHeading/CollectionHeading'
import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
import s from './CollectionCarcoucel.module.scss'
interface ColectionCarcoucelProps {
interface ColectionCarcoucelProps extends CollectionHeadingProps {
data: ProductCardProps[]
itemKey: string
title: string
subTitle: string
viewAllLink?: string
}
@@ -18,19 +17,21 @@ const ColectionCarcoucel = ({
data,
itemKey,
title,
subTitle,
subtitle,
type
}: ColectionCarcoucelProps) => {
return (
<div className={s.colectionCarcoucelWarpper}>
<div className={s.top}>
<div className={s.left}>
<CollectionHeading
subtitle={subTitle}
type={type}
subtitle={subtitle}
title={title}
></CollectionHeading>
</div>
<div className={s.right}>
<ViewAllItem />
<ViewAllItem link="#"/>
</div>
</div>
<div className={s.bot}>

138
src/components/modules/home/HomeCollection/HomeCollection.tsx Normal file
View File

@@ -0,0 +1,138 @@
import React from 'react'
import { CollectionCarcoucel } from '..'
import image5 from '../../../../../public/assets/images/image5.png'
import image6 from '../../../../../public/assets/images/image6.png'
import image7 from '../../../../../public/assets/images/image7.png'
import image8 from '../../../../../public/assets/images/image8.png'
interface HomeCollectionProps {}
const dataTest = [
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
{
name: 'Carrot',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image7.src,
},
{
name: 'Salad',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image8.src,
},
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
{
name: 'Carrot',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image7.src,
},
{
name: 'Salad',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image8.src,
},
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
]
const HomeCollection = (props: HomeCollectionProps) => {
return (
<div className="w-full">
<CollectionCarcoucel
data={dataTest}
itemKey="product-1"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
<CollectionCarcoucel
data={dataTest}
itemKey="product-2"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
<CollectionCarcoucel
data={dataTest}
itemKey="product-3"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
<CollectionCarcoucel
data={dataTest}
itemKey="product-4"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
<CollectionCarcoucel
data={dataTest}
itemKey="product-5"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
<CollectionCarcoucel
data={dataTest}
itemKey="product-6"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
</div>
)
}
export default HomeCollection

14
src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
View File

@@ -6,8 +6,10 @@
@apply flex flex-col;
.top {
@apply spacing-horizontal flex w-full justify-between;
.right {
margin-right: 14.76;
@screen xl {
.right {
margin-right: 2.476rem;
}
}
}
.mid{
@@ -16,8 +18,12 @@
@apply flex justify-start spacing-horizontal;
.tab{
padding: 1.6rem 1.6rem 0.8rem 1.6rem;
font-size: 3.2rem;
line-height: 4rem;
font-size: 2.4rem;
line-height: 2.8rem;
@screen md{
font-size: 3.2rem;
line-height: 4rem;
}
outline: none;
&.active{
@apply text-background custom-border-radius bg-primary;

2
src/components/modules/home/HomeRecipe/HomeRecipe.tsx
View File

@@ -19,7 +19,7 @@ const HomeRecipe = ({ data, itemKey, title }: HomeRecipeProps) => {
<HeadingCommon>{title}</HeadingCommon>
</div>
<div className={s.right}>
<ViewAllItem />
<ViewAllItem link="#"/>
</div>
</div>
<div className={s.mid}>

1
src/components/modules/home/index.ts
View File

@@ -3,3 +3,4 @@ export { default as CollectionCarcoucel } from './CollectionCarcoucel/Collection
export { default as HomeCTA } from './HomeCTA/HomeCTA'
export { default as HomeSubscribe } from './HomeSubscribe/HomeSubscribe'
export { default as HomeVideo } from './HomeVideo/HomeVideo'
export { default as HomeCollection } from './HomeCollection/HomeCollection'