feat: DeliveryAndPolicyContent

pages/index.tsx

@@ -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} />
+      <DeliveryAndPolicyContent title="DELIVERY AND POLICY" content={CONTENT} date="APRIL 30, 2021" />
-      <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} />
       <RelevantBlogPosts />
       {/* todo: uncomment */}
       {/* <ModalCreateUserInfo/> */}

src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss

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

src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx

@@ -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}>
+                <HeadingCommon>{title}</HeadingCommon>
-                    {title}
             </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>
     )