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 diff --git a/pages/notifications.tsx b/pages/notifications.tsx new file mode 100644 index 000000000..f124519f9 --- /dev/null +++ b/pages/notifications.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Layout } from 'src/components/common'; +import { NotificationBreadcrumb, NotificationHeading, 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 0a6aab07a..70575e11d 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -33,4 +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' -export { default as IconNoti } from './IconNoti' \ No newline at end of file +export { default as IconBell } from './IconBell' +export { default as IconBill } from './IconBill' +export { default as IconNoti } from './IconNoti' 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 new file mode 100644 index 000000000..21c4e9cc3 --- /dev/null +++ b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss @@ -0,0 +1,13 @@ +@import "../../../../styles/utilities"; + +.emptyPage { + @apply flex justify-center items-center flex-col; + .emptyIcon { + padding-bottom: 2.6rem; + } + .emptyContent { + @apply sub-headline; + 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/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/NotificationItem/NotificationItem.module.scss b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss new file mode 100644 index 000000000..ac064e19f --- /dev/null +++ b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss @@ -0,0 +1,35 @@ +@import '../../../../styles/utilities'; + +.notificationItem { + @apply flex flex-row spacing-horizontal; + padding-top: 1.2rem; + &:hover{ + cursor: pointer; + } + .contentWrapper { + padding-left: 1.6rem; + padding-bottom: 1.4rem; + max-width: 26.3rem; + .title { + font-weight: bold; + color: var(--text-active); + } + .date { + @apply caption; + color: #828282; + } + } + &.isChecked { + .icon { + rect { + fill: var(--gray) + } + path { + fill: var(--disabled) + } + } + .title, .content { + color: var(--text-label); + } + } +} \ 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..402575daf --- /dev/null +++ b/src/components/modules/Notification/NotificationItem/NotificationItem.tsx @@ -0,0 +1,51 @@ +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' +import {ROUTE , QUERY_KEY, ACCOUNT_TAB } from 'src/utils/constanst.utils' + +export interface NotificationItemProps { + ID?: string, + title?: string, + content?: string, + date?: string, + checked?: boolean, +} + +const NotificationItem = ({ ID, title, content, date, 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.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 new file mode 100644 index 000000000..954b7727c --- /dev/null +++ b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx @@ -0,0 +1,56 @@ +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, + data?: NotificationItemProps[], +} +const NOTIFICATION_DATA = [ + { + ID: "ID33455", + title: "Your order ID33455", + content: "The order has been deliveried successfully!", + date: "2 days ago", + checked: false, + }, + { + ID: "ID33456", + title: "Your order ID33456", + content: "The order has been deliveried successfully!", + date: "2 days ago", + checked: false, + }, + { + ID: "ID33457", + title: "Your order ID33457", + content: "The order has been deliveried successfully!", + date: "2 days ago", + 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..413535595 --- /dev/null +++ b/src/components/modules/Notification/index.tsx @@ -0,0 +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' +export { default as NotificationHeading } from './NotificationHeading/NotificationHeading' \ No newline at end of file