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

refactor: format code and add data test

Browse Source
This commit is contained in:
unknown 2021-09-07 23:22:09 +07:00
parent be96b3a55a
commit 7fa5e6cd3a
10 changed files with 122 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
pages/test.tsx
View File

@ -1,146 +1,14 @@
import { useState } from 'react'
import {
ButtonCommon,
Layout,
ModalCommon,
ProductCarousel,
RelevantBlogPosts,
CollapseCommon,
Layout
} 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,
},
]
const COLLAPSE_DATA = [
{
title: "This is a subtitle",
content: [
"When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
"Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
},
{
title: "This is a subtitle",
content: [
"When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
"Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
},
{
title: "This is a subtitle",
content: [
"When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
"Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
},
{
title: "This is a subtitle",
content: [
"When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
"Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
},
]
import { DeliveryAndPolicyPage } from 'src/components/modules/delivery-policy'
export default function Test() {
return (
<>
<CollapseCommon data={COLLAPSE_DATA} />
<RelevantBlogPosts />
<DeliveryAndPolicyPage />
</>
)
}

58
src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
View File

@ -1,5 +1,4 @@
import React from 'react'
import { ROUTE } from 'src/utils/constanst.utils'
import s from './BreadcrumbCommon.module.scss'
import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
@ -9,28 +8,55 @@ interface BreadcrumbCommonProps {
showHomePage?: boolean;
}
const BreadcrumbCommon = ({ crumbs, showHomePage = true }: BreadcrumbCommonProps) => {
const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => {
return (
<section className={s.breadcrumbCommon}>
{
showHomePage && <BreadcrumbItem key='Home' text='Home' href={ROUTE.HOME} />
showHomePage && crumbs[0].link==="/" && crumbs.map((crumb, i) => {
if (i === 0) {
return (
<BreadcrumbItem key={crumb.name} text={crumb.name} href={crumb.link} />
)
}
if (i === crumbs.length-1) {
return (
<BreadcrumbSeparator key={crumb.name}>
<span>{crumb.name}</span>
</BreadcrumbSeparator>
)
}
return (
<BreadcrumbSeparator key={crumb.name}>
<BreadcrumbItem text={crumb.name} href={crumb.link} />
</BreadcrumbSeparator>
)
})
}
{
crumbs.length > 0 && <>
{
crumbs.slice(0, crumbs.length - 1).map((crumb) => (
< BreadcrumbSeparator key={crumb.name}>
<BreadcrumbItem text={crumb.name} href={crumb.link} />
!showHomePage && crumbs.map((crumb, i) => {
if (i === 0) {
return
}
if (i === 1) {
return (
<BreadcrumbItem key={crumb.name} text={crumb.name} href={crumb.link} />
)
}
if (i === crumbs.length-1) {
return (
<BreadcrumbSeparator key={crumb.name}>
<span>{crumb.name}</span>
</BreadcrumbSeparator>
))}
< BreadcrumbSeparator>
<span className={s.currentItem}>{crumbs[crumbs.length - 1].name}</span>
</BreadcrumbSeparator>
</>
)
}
return (
<BreadcrumbSeparator key={crumb.name}>
<BreadcrumbItem text={crumb.name} href={crumb.link} />
</BreadcrumbSeparator>
)
})
}
</section >
</section>
)
}

7
src/components/common/index.ts
View File

@ -36,9 +36,4 @@ export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPos
export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
<<<<<<< HEAD
export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
export { default as CartDrawer} from './CartDrawer/CartDrawer'
export { default as BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon'
=======
>>>>>>> 0f6cdc9f66ceaf2b0aec38d0d6444de902b69bfe
export { default as BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon'

7
src/components/icons/index.ts
View File

@ -23,10 +23,3 @@ export { default as IconCheck } from './IconCheck'
export { default as IconTime } from './IconTime'
export { default as IconPeople } from './IconPeople'
export { default as IconLocation } from './IconLocation'
<<<<<<< HEAD
export { default as IconClose } from './IconClose'
export { default as IconDelete } from './IconDelete'
export { default as IconPlus } from './IconPlus'
export { default as IconMinus } from './IconMinus'
=======
>>>>>>> 0f6cdc9f66ceaf2b0aec38d0d6444de902b69bfe

5
src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss
View File

@ -1,5 +1,4 @@
.breadCrumb{
@apply absolute z-10;
.breadCrumb {
@apply absolute z-10 pt-12;
padding-left: 3.2rem;
padding-top: 3rem;
}

2
src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx
View File

@ -15,7 +15,7 @@ const DeliveryAndPolicyBreadCrumb = () => {
return (
<section className={s.breadCrumb}>
<BreadcrumbCommon crumbs={CRUMB_DATA}/>
</section>
</section>
)
}
export default DeliveryAndPolicyBreadCrumb

49
src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss
View File

@ -1,28 +1,23 @@
.wrapper{
@apply flex justify-center;
.wrapper {
@apply flex justify-center pt-20 pb-28;
.deliveryAndPolicyContentWrapper {
max-width: 80.4rem;
min-height: 4rem;
.titleWrapper {
@apply flex flex-col items-start;
.date {
@apply inline flex flex-row;
margin-bottom: 0.4rem;
.update {
@apply uppercase leading-8;
color:var(--text-label);
font-size: 1.2rem;
letter-spacing: 0.01em;
}
}
}
.contentContainer {
@apply pb-16;
}
}
}
.deliveryAndPolicyContentWrapper{
max-width: 80.4rem;
min-height: 4rem;
}
.titleWrapper{
@apply flex flex-col items-start;
}
.date{
@apply inline flex flex-row;
margin-bottom: 0.4rem;
}
.update{
@apply uppercase leading-8;
color:var(--text-label);
font-size: 1.2rem;
letter-spacing: 0.01em;
}
.contentContainer{
@apply pb-16;
}

56
src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx
View File

@ -1,20 +1,58 @@
import { CollapseCommon, DateTime, HeadingCommon } from 'src/components/common'
import CollapseContent from 'src/components/common/CollapseCommon/CollapseContent/CollapseContent'
import CollapseContent from 'src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent'
import s from './DeliveryAndPolicyContent.module.scss'
interface DeliveryAndPolicyContentProps{
title: string,
date: string,
content: Array<string>,
title?: string,
date?: string,
content?: Array<string>,
}
const CONTENT = [
const HEADER_CONTENT = [
"When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
"Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
]
const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyContentProps) => {
const DELIVERYANDPOLICY_DATA = [
{
title: "This is a subtitle",
content: [
"When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
"Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
},
{
title: "This is a subtitle",
content: [
"When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
"Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
},
{
title: "This is a subtitle",
content: [
"When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
"Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
},
{
title: "This is a subtitle",
content: [
"When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
"Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
}
]
const DeliveryAndPolicyContent = ( { title="Delivery & Policy", date="APRIL 30", content = HEADER_CONTENT } : DeliveryAndPolicyContentProps) => {
return (
<section className={s.wrapper}>
@ -28,10 +66,10 @@ const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyC
</div>
<div className={s.contentContainer}>
{
content.map(item => <CollapseContent content={item} />)
content.map(item => <CollapseContent key={item} content={item} />)
}
</div>
<CollapseCommon data={CONTENT} />\
<CollapseCommon data={DELIVERYANDPOLICY_DATA} />
</div>
</section>

1
src/components/modules/delivery-policy/DeliveryAndPolicyPage/DeliveryAndPolicyPage.tsx
View File

@ -1,7 +1,6 @@
import DeliveryAndPolicyBreadCrumb from "../DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb"
import DeliveryAndPolicyContent from "../DeliveryAndPolicyContent/DeliveryAndPolicyContent"
const DeliveryAndPolicyPage = () => {
return (
<>

3
src/components/modules/delivery-policy/index.tsx
View File

@ -1,2 +1,3 @@
export { default as DeliveryAndPolicyContent } from './DeliveryAndPolicyContent/DeliveryAndPolicyContent'
export { default as DeliveryAndPolicyBreadCrumb } from './DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb'
export { default as DeliveryAndPolicyBreadCrumb } from './DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb'
export { default as DeliveryAndPolicyPage } from './DeliveryAndPolicyPage/DeliveryAndPolicyPage'