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