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

🐛 bug: caroucel to carousel

Browse Source 
:%s
This commit is contained in:
unknown 2021-08-27 15:34:44 +07:00
parent eba36de46a
commit 162e698efe
5 changed files with 107 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
pages/test.tsx
View File

@ -1,6 +1,96 @@
import { useState } from 'react'
import { ButtonCommon, Layout, ModalCommon } from 'src/components/common'
import { CollectionCarcousel } from 'src/components/modules/home'
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'
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,
},
]
export default function Test() {
const [visible, setVisible] = useState(false)
const onClose = () => {
@ -17,6 +107,13 @@ export default function Test() {
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod itaque, officia magni molestias! Architecto deserunt soluta laborum commodi nesciunt delectus similique temporibus distinctio? Facere eaque minima enim modi magni, laudantium, animi mollitia beatae repudiandae maxime labore error nesciunt, nisi est?
</div>
</ModalCommon>
<CollectionCarcousel
data={dataTest}
itemKey="product-2"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
category={"veggie"}
/>
</>
)
}

0
src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.module.scss → src/components/modules/home/CollectionCarcousel/CollectionCarcousel.module.scss
View File

2
src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx → src/components/modules/home/CollectionCarcousel/CollectionCarcousel.tsx
View File

@ -7,7 +7,7 @@ import {
import { CollectionHeadingProps } from 'src/components/common/CollectionHeading/CollectionHeading'
import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import s from './CollectionCarcoucel.module.scss'
import s from './CollectionCarcousel.module.scss'
interface ColectionCarcoucelProps extends CollectionHeadingProps {
data: ProductCardProps[]
itemKey: string

14
src/components/modules/home/HomeCollection/HomeCollection.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'
import { CollectionCarcoucel } from '..'
import { CollectionCarcousel } 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'
@ -95,7 +95,7 @@ const dataTest = [
const HomeCollection = (props: HomeCollectionProps) => {
return (
<div className="w-full">
<CollectionCarcoucel
<CollectionCarcousel
type="highlight"
data={dataTest}
itemKey="product-1"
@ -103,35 +103,35 @@ const HomeCollection = (props: HomeCollectionProps) => {
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
category={"veggie"}
/>
<CollectionCarcoucel
<CollectionCarcousel
data={dataTest}
itemKey="product-2"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
category={"veggie"}
/>
<CollectionCarcoucel
<CollectionCarcousel
data={dataTest}
itemKey="product-3"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
category={"veggie"}
/>
<CollectionCarcoucel
<CollectionCarcousel
data={dataTest}
itemKey="product-4"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
category={"veggie"}
/>
<CollectionCarcoucel
<CollectionCarcousel
data={dataTest}
itemKey="product-5"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
category={"veggie"}
/>
<CollectionCarcoucel
<CollectionCarcousel
data={dataTest}
itemKey="product-6"
title="VEGGIE"

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

@ -1,5 +1,5 @@
export { default as HomeBanner } from './HomeBanner/HomeBanner'
export { default as CollectionCarcoucel } from './CollectionCarcoucel/CollectionCarcoucel'
export { default as CollectionCarcousel } from './CollectionCarcousel/CollectionCarcousel'
export { default as HomeCategories } from './HomeCategories/HomeCategories'
export { default as HomeCTA } from './HomeCTA/HomeCTA'
export { default as HomeSubscribe } from './HomeSubscribe/HomeSubscribe'