From 3c8f01fa7e470ce9e68ab87d172def72d4ccc284 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 14 Sep 2021 16:04:19 +0700 Subject: [PATCH 1/6] feat: notificationpage mobile --- pages/notification.tsx | 13 ++++ src/components/icons/IconBell.tsx | 19 ++++++ src/components/icons/IconBill.tsx | 25 ++++++++ src/components/icons/index.ts | 2 + .../NotificationEmptyPage.module.scss | 15 +++++ .../NotificationEmptyPage.tsx | 18 ++++++ .../NotificationItem.module.scss | 39 ++++++++++++ .../NotificationItem/NotificationItem.tsx | 49 +++++++++++++++ .../NotificationPage/NotificationPage.tsx | 60 +++++++++++++++++++ src/components/modules/Notification/index.tsx | 2 + 10 files changed, 242 insertions(+) create mode 100644 pages/notification.tsx create mode 100644 src/components/icons/IconBell.tsx create mode 100644 src/components/icons/IconBill.tsx create mode 100644 src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss create mode 100644 src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.tsx create mode 100644 src/components/modules/Notification/NotificationItem/NotificationItem.module.scss create mode 100644 src/components/modules/Notification/NotificationItem/NotificationItem.tsx create mode 100644 src/components/modules/Notification/NotificationPage/NotificationPage.tsx create mode 100644 src/components/modules/Notification/index.tsx diff --git a/pages/notification.tsx b/pages/notification.tsx new file mode 100644 index 000000000..df76e6c58 --- /dev/null +++ b/pages/notification.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Layout } from 'src/components/common'; +import { NotificationPage } from 'src/components/modules/Notification'; + +const Notification = () => { + return ( + + ) +} + +Notification.Layout = Layout + +export default Notification; \ No newline at end of file diff --git a/src/components/icons/IconBell.tsx b/src/components/icons/IconBell.tsx new file mode 100644 index 000000000..278edc640 --- /dev/null +++ b/src/components/icons/IconBell.tsx @@ -0,0 +1,19 @@ +const IconBell = ({ ...props }) => { + return ( + + + + ) + } + + export default IconBell + \ No newline at end of file diff --git a/src/components/icons/IconBill.tsx b/src/components/icons/IconBill.tsx new file mode 100644 index 000000000..4892a0b07 --- /dev/null +++ b/src/components/icons/IconBill.tsx @@ -0,0 +1,25 @@ +const IconBill = ({ ...props }) => { + return ( + + + + + ) + } + + export default IconBill + \ No newline at end of file diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 7dd36b14f..184e107e1 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -33,3 +33,5 @@ export { default as IconMinus } from './IconMinus' export { default as IconCirclePlus } from './IconCirclePlus' export { default as IconDoneCheckout } from './IconDoneCheckout' export { default as IconFilter } from './IconFilter' +export { default as IconBell } from './IconBell' +export { default as IconBill } from './IconBill' \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss new file mode 100644 index 000000000..457b22e77 --- /dev/null +++ b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss @@ -0,0 +1,15 @@ +@import "../../../../styles/utilities"; + +.emptyPage { + @apply flex justify-center items-center flex-col; + .emptyIcon { + padding-bottom: 2.6rem; + } + .emptyContent { + font-size: 2.4rem; + line-height: 3.2rem; + letter-spacing: -0.01em; + align-content: center; + color: var(--disabled); + } +} \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.tsx b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.tsx new file mode 100644 index 000000000..b698b0f50 --- /dev/null +++ b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { IconBell } from 'src/components/icons' +import s from '../NotificationEmptyPage/NotificationEmptyPage.module.scss' + + +const NotificationEmptyPage = () => { + return ( +
+
+ +
+
+

Your Notification is empty

+
+
+ ) +} +export default NotificationEmptyPage \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss new file mode 100644 index 000000000..38ce184d1 --- /dev/null +++ b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss @@ -0,0 +1,39 @@ +@import '../../../../styles/utilities'; + +.notificationItem { + @apply flex flex-row; + padding-left: 1.6rem; + padding-bottom: 1.4rem; + &:hover{ + cursor: pointer; + } + .contentWrapper { + padding-left: 1.6rem; + max-width: 26.3rem; + .title { + font-weight: bold; + color: var(--text-active); + } + .date { + font-size: 1.2rem; + line-height: 2rem; + letter-spacing: 0.01em; + } + } + &.isChecked { + .icon { + rect { + fill: var(--gray) + } + path { + fill: var(--disabled) + } + } + .title { + color: var(--label); + } + .content, .date { + color: #828282; + } + } +} \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.tsx b/src/components/modules/Notification/NotificationItem/NotificationItem.tsx new file mode 100644 index 000000000..83de0ff8f --- /dev/null +++ b/src/components/modules/Notification/NotificationItem/NotificationItem.tsx @@ -0,0 +1,49 @@ +import React, {useState} from 'react' +import s from '../NotificationItem/NotificationItem.module.scss' +import ClassNames from 'classnames' +import { IconBill } from 'src/components/icons' +import Link from 'next/link' + +export interface NotificationItemProps { + ID?: string, + title?: string, + content?: string, + date?: string, + link: string, + checked?: boolean, +} + +const NotificationItem = ({ ID, title, content, date, link, checked}: NotificationItemProps) => { + const [isChecked, setChecked] = useState(checked) + const Check = () => { + setChecked(true) + } + return ( +
+
+ +
+ +
+
+ {title} +
+
+ {content} +
+
+ {date} +
+
+ + +
+ ) +} + +export default NotificationItem \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx new file mode 100644 index 000000000..8abd39d9f --- /dev/null +++ b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx @@ -0,0 +1,60 @@ +import React from 'react' +import NotificationEmptyPage from '../NotificationEmptyPage/NotificationEmptyPage' +import NotificationItem, { NotificationItemProps } from '../NotificationItem/NotificationItem' +import {ROUTE , QUERY_KEY, ACCOUNT_TAB } from 'src/utils/constanst.utils' + + +interface NotificationPageProps { + isEmpty?: boolean, + data?: NotificationItemProps[], +} +const NOTIFICATION_DATA = [ + { + ID: "ID33455", + title: "Your order ID33455", + content: "The order has been deliveried successfully!", + date: "2 days ago", + link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`, + checked: false, + }, + { + ID: "ID33456", + title: "Your order ID33456", + content: "The order has been deliveried successfully!", + date: "2 days ago", + link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`, + checked: false, + }, + { + ID: "ID33457", + title: "Your order ID33457", + content: "The order has been deliveried successfully!", + date: "2 days ago", + link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`, + checked: true, + } +] + + +const NotificationPage = ({ isEmpty=false, data = NOTIFICATION_DATA }: NotificationPageProps) => { + return ( + <> + { + isEmpty ? + + : + <> + { + data.map(item => { + return ( + + ) + }) + } + + } + + ) +} + +export default NotificationPage \ No newline at end of file diff --git a/src/components/modules/Notification/index.tsx b/src/components/modules/Notification/index.tsx new file mode 100644 index 000000000..64413501a --- /dev/null +++ b/src/components/modules/Notification/index.tsx @@ -0,0 +1,2 @@ +export { default as NotificationPage } from './NotificationPage/NotificationPage' +export { default as NotificationEmptyPage } from './NotificationEmptyPage/NotificationEmptyPage' \ No newline at end of file From 66cb8728fe369fdc36d79243575fb4ab13554451 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 14 Sep 2021 16:19:56 +0700 Subject: [PATCH 2/6] styles: add padding top --- src/components/icons/index.ts | 3 --- .../Notification/NotificationItem/NotificationItem.module.scss | 3 ++- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 586ff3cb7..70575e11d 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -33,9 +33,6 @@ export { default as IconMinus } from './IconMinus' export { default as IconCirclePlus } from './IconCirclePlus' export { default as IconDoneCheckout } from './IconDoneCheckout' export { default as IconFilter } from './IconFilter' -<<<<<<< HEAD export { default as IconBell } from './IconBell' export { default as IconBill } from './IconBill' -======= export { default as IconNoti } from './IconNoti' ->>>>>>> 83b5f9048687e555a978ae71e26a1d19aac2247c diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss index 38ce184d1..ca7531981 100644 --- a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss +++ b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss @@ -2,13 +2,14 @@ .notificationItem { @apply flex flex-row; + padding-top: 1.2rem; padding-left: 1.6rem; - padding-bottom: 1.4rem; &:hover{ cursor: pointer; } .contentWrapper { padding-left: 1.6rem; + padding-bottom: 1.4rem; max-width: 26.3rem; .title { font-weight: bold; From ff5deb23125732c83b0f80d4567145271bf7d9ee Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 14 Sep 2021 16:25:53 +0700 Subject: [PATCH 3/6] styles: fix name color --- .../NotificationItem/NotificationItem.module.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss index ca7531981..3ffaf1499 100644 --- a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss +++ b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss @@ -16,6 +16,7 @@ color: var(--text-active); } .date { + color: #828282; font-size: 1.2rem; line-height: 2rem; letter-spacing: 0.01em; @@ -30,11 +31,8 @@ fill: var(--disabled) } } - .title { - color: var(--label); - } - .content, .date { - color: #828282; + .title, .content { + color: var(--text-label); } } } \ No newline at end of file From d6f0ef298de9f5b3f39f32c33b5ff04d34d1a59d Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 14 Sep 2021 17:15:40 +0700 Subject: [PATCH 4/6] styles: add spacing --- pages/notification.tsx | 13 --------- pages/notifications.tsx | 16 +++++++++++ .../NotificationBreadcrumb.module.scss | 7 +++++ .../NotificationBreadcrumb.tsx | 16 +++++++++++ .../NotificationEmptyPage.module.scss | 4 +-- .../NotificationItem.module.scss | 7 ++--- .../NotificationItem/NotificationItem.tsx | 28 ++++++++++--------- .../NotificationPage/NotificationPage.tsx | 6 +--- src/components/modules/Notification/index.tsx | 4 ++- 9 files changed, 61 insertions(+), 40 deletions(-) delete mode 100644 pages/notification.tsx create mode 100644 pages/notifications.tsx create mode 100644 src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss create mode 100644 src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx diff --git a/pages/notification.tsx b/pages/notification.tsx deleted file mode 100644 index df76e6c58..000000000 --- a/pages/notification.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Layout } from 'src/components/common'; -import { NotificationPage } from 'src/components/modules/Notification'; - -const Notification = () => { - return ( - - ) -} - -Notification.Layout = Layout - -export default Notification; \ No newline at end of file diff --git a/pages/notifications.tsx b/pages/notifications.tsx new file mode 100644 index 000000000..235a60005 --- /dev/null +++ b/pages/notifications.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Layout } from 'src/components/common'; +import { NotificationBreadcrumb, NotificationPage } from 'src/components/modules/Notification'; + +const Notification = () => { + return ( + <> + + + + ) +} + +Notification.Layout = Layout + +export default Notification; \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss new file mode 100644 index 000000000..d347ad872 --- /dev/null +++ b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss @@ -0,0 +1,7 @@ +@import "../../../../styles/utilities"; +.breadCrumbWrapper { + @apply py-12 spacing-horizontal; + @screen lg { + padding-left: 3.2rem; + } +} \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx new file mode 100644 index 000000000..5f713e2db --- /dev/null +++ b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx @@ -0,0 +1,16 @@ +import { BreadcrumbCommon } from "src/components/common" +import s from './NotificationBreadcrumb.module.scss' + +const NOTIFICATION_DATA = [ + {link: "/notifications", name: "Notifications"}, +]; + +const NotificationBreadcrumb = () => { + return ( +
+ +
+ ) +} + +export default NotificationBreadcrumb \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss index 457b22e77..21c4e9cc3 100644 --- a/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss +++ b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss @@ -6,9 +6,7 @@ padding-bottom: 2.6rem; } .emptyContent { - font-size: 2.4rem; - line-height: 3.2rem; - letter-spacing: -0.01em; + @apply sub-headline; align-content: center; color: var(--disabled); } diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss index 3ffaf1499..ac064e19f 100644 --- a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss +++ b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss @@ -1,9 +1,8 @@ @import '../../../../styles/utilities'; .notificationItem { - @apply flex flex-row; + @apply flex flex-row spacing-horizontal; padding-top: 1.2rem; - padding-left: 1.6rem; &:hover{ cursor: pointer; } @@ -16,10 +15,8 @@ color: var(--text-active); } .date { + @apply caption; color: #828282; - font-size: 1.2rem; - line-height: 2rem; - letter-spacing: 0.01em; } } &.isChecked { diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.tsx b/src/components/modules/Notification/NotificationItem/NotificationItem.tsx index 83de0ff8f..402575daf 100644 --- a/src/components/modules/Notification/NotificationItem/NotificationItem.tsx +++ b/src/components/modules/Notification/NotificationItem/NotificationItem.tsx @@ -3,17 +3,17 @@ import s from '../NotificationItem/NotificationItem.module.scss' import ClassNames from 'classnames' import { IconBill } from 'src/components/icons' import Link from 'next/link' +import {ROUTE , QUERY_KEY, ACCOUNT_TAB } from 'src/utils/constanst.utils' export interface NotificationItemProps { ID?: string, title?: string, content?: string, date?: string, - link: string, checked?: boolean, } -const NotificationItem = ({ ID, title, content, date, link, checked}: NotificationItemProps) => { +const NotificationItem = ({ ID, title, content, date, checked}: NotificationItemProps) => { const [isChecked, setChecked] = useState(checked) const Check = () => { setChecked(true) @@ -28,18 +28,20 @@ const NotificationItem = ({ ID, title, content, date, link, checked}: Notificati
- -
- + diff --git a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx index 8abd39d9f..c5c274ee0 100644 --- a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx +++ b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx @@ -1,7 +1,6 @@ import React from 'react' import NotificationEmptyPage from '../NotificationEmptyPage/NotificationEmptyPage' import NotificationItem, { NotificationItemProps } from '../NotificationItem/NotificationItem' -import {ROUTE , QUERY_KEY, ACCOUNT_TAB } from 'src/utils/constanst.utils' interface NotificationPageProps { @@ -14,7 +13,6 @@ const NOTIFICATION_DATA = [ title: "Your order ID33455", content: "The order has been deliveried successfully!", date: "2 days ago", - link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`, checked: false, }, { @@ -22,7 +20,6 @@ const NOTIFICATION_DATA = [ title: "Your order ID33456", content: "The order has been deliveried successfully!", date: "2 days ago", - link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`, checked: false, }, { @@ -30,7 +27,6 @@ const NOTIFICATION_DATA = [ title: "Your order ID33457", content: "The order has been deliveried successfully!", date: "2 days ago", - link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`, checked: true, } ] @@ -47,7 +43,7 @@ const NotificationPage = ({ isEmpty=false, data = NOTIFICATION_DATA }: Notificat { data.map(item => { return ( - + ) }) } diff --git a/src/components/modules/Notification/index.tsx b/src/components/modules/Notification/index.tsx index 64413501a..dbc87c8cc 100644 --- a/src/components/modules/Notification/index.tsx +++ b/src/components/modules/Notification/index.tsx @@ -1,2 +1,4 @@ export { default as NotificationPage } from './NotificationPage/NotificationPage' -export { default as NotificationEmptyPage } from './NotificationEmptyPage/NotificationEmptyPage' \ No newline at end of file +export { default as NotificationEmptyPage } from './NotificationEmptyPage/NotificationEmptyPage' +export { default as NotificationItem } from './NotificationItem/NotificationItem' +export { default as NotificationBreadcrumb } from './NotificationBreadcrum/NotificationBreadcrumb' \ No newline at end of file From 56cba86a1d6403d0a13aa2b0b0d26cebec8c088f Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 14 Sep 2021 17:26:47 +0700 Subject: [PATCH 5/6] feat: Notifications title --- pages/notifications.tsx | 3 ++- .../NotificationHeading.module.scss | 9 +++++++++ .../NotificationHeading.tsx | 18 ++++++++++++++++++ .../NotificationPage.module.scss | 6 ++++++ .../NotificationPage/NotificationPage.tsx | 6 +++--- src/components/modules/Notification/index.tsx | 3 ++- 6 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss create mode 100644 src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx create mode 100644 src/components/modules/Notification/NotificationPage/NotificationPage.module.scss diff --git a/pages/notifications.tsx b/pages/notifications.tsx index 235a60005..f124519f9 100644 --- a/pages/notifications.tsx +++ b/pages/notifications.tsx @@ -1,11 +1,12 @@ import React from 'react'; import { Layout } from 'src/components/common'; -import { NotificationBreadcrumb, NotificationPage } from 'src/components/modules/Notification'; +import { NotificationBreadcrumb, NotificationHeading, NotificationPage } from 'src/components/modules/Notification'; const Notification = () => { return ( <> + ) diff --git a/src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss b/src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss new file mode 100644 index 000000000..2833c5f10 --- /dev/null +++ b/src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss @@ -0,0 +1,9 @@ +@import "../../../../styles/utilities"; + +.headingWrapper { + @apply flex spacing-horizontal-left pb-16; + .heading{ + max-width: 121.6rem; + flex-grow: 1; + } +} \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx b/src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx new file mode 100644 index 000000000..573bac2a9 --- /dev/null +++ b/src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx @@ -0,0 +1,18 @@ +import { HeadingCommon } from "src/components/common" +import s from './NotificationHeading.module.scss' + +interface NotificationHeadingProps { + children?: React.ReactNode, + heading?: string, +} + +const NotificationHeading = ({heading = "NOTIFICATIONS"}: NotificationHeadingProps) => { + return ( +
+
+ {heading} +
+
+ ) +} +export default NotificationHeading \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss b/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss new file mode 100644 index 000000000..1a214dccc --- /dev/null +++ b/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss @@ -0,0 +1,6 @@ +.notificationPage { + padding-bottom: 5.4rem; + @screen md { + padding-bottom: 12.8rem; + } +} \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx index c5c274ee0..954b7727c 100644 --- a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx +++ b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx @@ -1,7 +1,7 @@ import React from 'react' import NotificationEmptyPage from '../NotificationEmptyPage/NotificationEmptyPage' import NotificationItem, { NotificationItemProps } from '../NotificationItem/NotificationItem' - +import s from './NotificationPage.module.scss' interface NotificationPageProps { isEmpty?: boolean, @@ -34,7 +34,7 @@ const NOTIFICATION_DATA = [ const NotificationPage = ({ isEmpty=false, data = NOTIFICATION_DATA }: NotificationPageProps) => { return ( - <> +
{ isEmpty ? @@ -49,7 +49,7 @@ const NotificationPage = ({ isEmpty=false, data = NOTIFICATION_DATA }: Notificat } } - +
) } diff --git a/src/components/modules/Notification/index.tsx b/src/components/modules/Notification/index.tsx index dbc87c8cc..413535595 100644 --- a/src/components/modules/Notification/index.tsx +++ b/src/components/modules/Notification/index.tsx @@ -1,4 +1,5 @@ export { default as NotificationPage } from './NotificationPage/NotificationPage' export { default as NotificationEmptyPage } from './NotificationEmptyPage/NotificationEmptyPage' export { default as NotificationItem } from './NotificationItem/NotificationItem' -export { default as NotificationBreadcrumb } from './NotificationBreadcrum/NotificationBreadcrumb' \ No newline at end of file +export { default as NotificationBreadcrumb } from './NotificationBreadcrum/NotificationBreadcrumb' +export { default as NotificationHeading } from './NotificationHeading/NotificationHeading' \ No newline at end of file From 2e66e0108eee801a118bafff3b6451ef6db9d0ff Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 14 Sep 2021 17:53:54 +0700 Subject: [PATCH 6/6] feat: add demo page --- pages/demo.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/pages/demo.tsx b/pages/demo.tsx index 38f91037c..47fb1eea1 100644 --- a/pages/demo.tsx +++ b/pages/demo.tsx @@ -1,13 +1,13 @@ import { Layout } from 'src/components/common'; - - - +import { NotificationEmptyPage, NotificationHeading, NotificationBreadcrumb } from 'src/components/modules/Notification'; export default function Demo() { - return <> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. - Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. - Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. + return ( + <> + + + + ) } Demo.Layout = Layout