From 7fa5e6cd3a3469ea4c93a3bda1bb3e46c5c16b03 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 7 Sep 2021 23:22:09 +0700 Subject: [PATCH] refactor: format code and add data test --- pages/test.tsx | 142 +----------------- .../BreadcrumbCommon/BreadcrumbCommon.tsx | 58 +++++-- src/components/common/index.ts | 7 +- src/components/icons/index.ts | 7 - .../DeliveryAndPolicyBreadCrumb.module.scss | 5 +- .../DeliveryAndPolicyBreadCrumb.tsx | 2 +- .../DeliveryAndPolicyContent.module.scss | 49 +++--- .../DeliveryAndPolicyContent.tsx | 56 +++++-- .../DeliveryAndPolicyPage.tsx | 1 - .../modules/delivery-policy/index.tsx | 3 +- 10 files changed, 122 insertions(+), 208 deletions(-) diff --git a/pages/test.tsx b/pages/test.tsx index 5afc61235..c21f4cd6c 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -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 ( <> - - + ) } diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx index 6ad2e6817..ef82ad16c 100644 --- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx @@ -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 (
{ - - showHomePage && + showHomePage && crumbs[0].link==="/" && crumbs.map((crumb, i) => { + if (i === 0) { + return ( + + ) + } + if (i === crumbs.length-1) { + return ( + + {crumb.name} + + ) + } + return ( + + + + ) + }) } { - crumbs.length > 0 && <> - - { - crumbs.slice(0, crumbs.length - 1).map((crumb) => ( - < BreadcrumbSeparator key={crumb.name}> - + !showHomePage && crumbs.map((crumb, i) => { + if (i === 0) { + return + } + if (i === 1) { + return ( + + ) + } + if (i === crumbs.length-1) { + return ( + + {crumb.name} - ))} - < BreadcrumbSeparator> - {crumbs[crumbs.length - 1].name} - - + ) + } + return ( + + + + ) + }) } -
+ ) } diff --git a/src/components/common/index.ts b/src/components/common/index.ts index da24e7eee..d10f17f8c 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -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' \ No newline at end of file diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index f0e3d74ce..1cdb56079 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -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 diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss index f852cc60a..0ef4cbc45 100644 --- a/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss +++ b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss @@ -1,5 +1,4 @@ -.breadCrumb{ - @apply absolute z-10; +.breadCrumb { + @apply absolute z-10 pt-12; padding-left: 3.2rem; - padding-top: 3rem; } \ No newline at end of file diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx index 89cbb6cfa..767045fff 100644 --- a/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx +++ b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx @@ -15,7 +15,7 @@ const DeliveryAndPolicyBreadCrumb = () => { return (
-
+ ) } export default DeliveryAndPolicyBreadCrumb \ No newline at end of file diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss index 3ea5108e5..87fae1224 100644 --- a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss +++ b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss @@ -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; -} \ No newline at end of file diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx index d9368ae87..9faa5f81f 100644 --- a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx +++ b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx @@ -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, + title?: string, + date?: string, + content?: Array, } - -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 (
@@ -28,10 +66,10 @@ const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyC
{ - content.map(item => ) + content.map(item => ) }
- \ +
diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyPage/DeliveryAndPolicyPage.tsx b/src/components/modules/delivery-policy/DeliveryAndPolicyPage/DeliveryAndPolicyPage.tsx index 8fc9542fd..4ff3c7237 100644 --- a/src/components/modules/delivery-policy/DeliveryAndPolicyPage/DeliveryAndPolicyPage.tsx +++ b/src/components/modules/delivery-policy/DeliveryAndPolicyPage/DeliveryAndPolicyPage.tsx @@ -1,7 +1,6 @@ import DeliveryAndPolicyBreadCrumb from "../DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb" import DeliveryAndPolicyContent from "../DeliveryAndPolicyContent/DeliveryAndPolicyContent" - const DeliveryAndPolicyPage = () => { return ( <> diff --git a/src/components/modules/delivery-policy/index.tsx b/src/components/modules/delivery-policy/index.tsx index bb23bd6c8..776889f36 100644 --- a/src/components/modules/delivery-policy/index.tsx +++ b/src/components/modules/delivery-policy/index.tsx @@ -1,2 +1,3 @@ export { default as DeliveryAndPolicyContent } from './DeliveryAndPolicyContent/DeliveryAndPolicyContent' -export { default as DeliveryAndPolicyBreadCrumb } from './DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb' \ No newline at end of file +export { default as DeliveryAndPolicyBreadCrumb } from './DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb' +export { default as DeliveryAndPolicyPage } from './DeliveryAndPolicyPage/DeliveryAndPolicyPage' \ No newline at end of file