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

feat: DeliveryAndPolicyContent

Browse Source
This commit is contained in:
unknown 2021-09-01 00:00:36 +07:00
parent 18ec5135ca
commit a5f6cbbf24
3 changed files with 52 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages/index.tsx
View File

@ -3,6 +3,7 @@ import { CardBlog, CollapseCommon, Layout, RelevantBlogPosts } from 'src/compone
import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
import {SelectCommon} from 'src/components/common'
import card from "../public/assets/images/card.png"
import { DeliveryAndPolicyContent } from 'src/components/modules/delivery-policy';
const 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.",
@ -24,12 +25,7 @@ export default function Home() {
{/* <HomeRecipe /> */}
{/* <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
<SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon> */}
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<DeliveryAndPolicyContent title="DELIVERY AND POLICY" content={CONTENT} date="APRIL 30, 2021" />
<RelevantBlogPosts />
{/* todo: uncomment */}
{/* <ModalCreateUserInfo/> */}

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

@ -0,0 +1,26 @@
.deliveryAndPolicyContentWrapper{
max-width: 80.4rem;
min-height: 4rem;
margin-left: 31.8rem;
margin-right: 31.8rem;
}
.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;
}

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

@ -1,24 +1,40 @@
import { DateTime } from 'src/components/common'
import { CollapseCommon, DateTime, HeadingCommon } from 'src/components/common'
import CollapseContent from 'src/components/common/CollapseCommon/CollapseContent/CollapseContent'
import s from './DeliveryAndPolicyContent.module.scss'
interface DeliveryAndPolicyContentProps{
title?: string,
title: string,
date: string,
content: string[],
content: Array<string>,
}
const 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) => {
return (
<section>
<section className={s.deliveryAndPolicyContentWrapper}>
<div className={s.titleWrapper}>
<div>LASTEST UPDATED:
<div className={s.date}>
<div className={s.update}>LASTEST UPDATED:&nbsp;</div>
<DateTime date={date} />
</div>
<div className={s.title}>
{title}
</div>
<HeadingCommon>{title}</HeadingCommon>
</div>
<div className={s.contentContainer}>
{
content.map(item => <CollapseContent content={item} />)
}
</div>
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
</section>
)