mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 04:14:18 +00:00
feat: notificationpage mobile
This commit is contained in:
unknown
parent
d99abb51e9
commit
3c8f01fa7e
13
pages/notification.tsx
Normal file
13
pages/notification.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Layout } from 'src/components/common';
|
||||
import { NotificationPage } from 'src/components/modules/Notification';
|
||||
|
||||
const Notification = () => {
|
||||
return (
|
||||
<NotificationPage />
|
||||
)
|
||||
}
|
||||
|
||||
Notification.Layout = Layout
|
||||
|
||||
export default Notification;
|
||||
19
src/components/icons/IconBell.tsx
Normal file
19
src/components/icons/IconBell.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
const IconBell = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
width="129"
|
||||
height="128"
|
||||
viewBox="0 0 129 128"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M96.5 70.2933V53.3333C96.4923 45.7767 93.8107 38.4665 88.9299 32.6975C84.0492 26.9284 77.2843 23.0728 69.8333 21.8133V16C69.8333 14.5855 69.2714 13.229 68.2712 12.2288C67.271 11.2286 65.9145 10.6667 64.5 10.6667C63.0855 10.6667 61.729 11.2286 60.7288 12.2288C59.7286 13.229 59.1667 14.5855 59.1667 16V21.8133C51.7157 23.0728 44.9508 26.9284 40.0701 32.6975C35.1893 38.4665 32.5077 45.7767 32.5 53.3333V70.2933C29.3877 71.3937 26.692 73.4297 24.7823 76.1223C22.8727 78.8149 21.8426 82.0323 21.8333 85.3333V96C21.8333 97.4145 22.3952 98.7711 23.3954 99.7712C24.3956 100.771 25.7522 101.333 27.1667 101.333H43.9133C45.1415 105.853 47.8227 109.842 51.5432 112.687C55.2637 115.531 59.8168 117.072 64.5 117.072C69.1832 117.072 73.7363 115.531 77.4568 112.687C81.1773 109.842 83.8585 105.853 85.0867 101.333H101.833C103.248 101.333 104.604 100.771 105.605 99.7712C106.605 98.7711 107.167 97.4145 107.167 96V85.3333C107.157 82.0323 106.127 78.8149 104.218 76.1223C102.308 73.4297 99.6123 71.3937 96.5 70.2933ZM43.1667 53.3333C43.1667 47.6754 45.4143 42.2492 49.4151 38.2484C53.4158 34.2476 58.8421 32 64.5 32C70.158 32 75.5842 34.2476 79.585 38.2484C83.5857 42.2492 85.8333 47.6754 85.8333 53.3333V69.3333H43.1667V53.3333ZM64.5 106.667C62.6385 106.655 60.8124 106.157 59.2031 105.222C57.5938 104.286 56.2574 102.945 55.3267 101.333H73.6733C72.7426 102.945 71.4062 104.286 69.7969 105.222C68.1876 106.157 66.3615 106.655 64.5 106.667ZM96.5 90.6667H32.5V85.3333C32.5 83.9189 33.0619 82.5623 34.0621 81.5621C35.0623 80.5619 36.4189 80 37.8333 80H91.1667C92.5812 80 93.9377 80.5619 94.9379 81.5621C95.9381 82.5623 96.5 83.9189 96.5 85.3333V90.6667Z"
|
||||
fill="#CCCCCC"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconBell
|
||||
|
||||
25
src/components/icons/IconBill.tsx
Normal file
25
src/components/icons/IconBill.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
const IconBill = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
width="64"
|
||||
height="64"
|
||||
viewBox="0 0 64 64"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"
|
||||
fill="#F1F8F4"
|
||||
/>
|
||||
<path
|
||||
d="M29.0833 30.25H32C32.3094 30.25 32.6062 30.1271 32.825 29.9083C33.0437 29.6895 33.1667 29.3928 33.1667 29.0833C33.1667 28.7739 33.0437 28.4772 32.825 28.2584C32.6062 28.0396 32.3094 27.9167 32 27.9167H30.8333V27.3333C30.8333 27.0239 30.7104 26.7272 30.4916 26.5084C30.2728 26.2896 29.9761 26.1667 29.6667 26.1667C29.3572 26.1667 29.0605 26.2896 28.8417 26.5084C28.6229 26.7272 28.5 27.0239 28.5 27.3333V27.975C27.7912 28.1189 27.1611 28.5211 26.7321 29.1035C26.3031 29.6858 26.1058 30.4068 26.1785 31.1265C26.2512 31.8461 26.5887 32.5131 27.1255 32.9979C27.6623 33.4827 28.36 33.7507 29.0833 33.75H30.25C30.4047 33.75 30.5531 33.8115 30.6625 33.9209C30.7719 34.0303 30.8333 34.1786 30.8333 34.3333C30.8333 34.4881 30.7719 34.6364 30.6625 34.7458C30.5531 34.8552 30.4047 34.9167 30.25 34.9167H27.3333C27.0239 34.9167 26.7272 35.0396 26.5084 35.2584C26.2896 35.4772 26.1667 35.7739 26.1667 36.0833C26.1667 36.3928 26.2896 36.6895 26.5084 36.9083C26.7272 37.1271 27.0239 37.25 27.3333 37.25H28.5V37.8333C28.5 38.1428 28.6229 38.4395 28.8417 38.6583C29.0605 38.8771 29.3572 39 29.6667 39C29.9761 39 30.2728 38.8771 30.4916 38.6583C30.7104 38.4395 30.8333 38.1428 30.8333 37.8333V37.1917C31.5422 37.0477 32.1722 36.6456 32.6012 36.0632C33.0302 35.4808 33.2275 34.7599 33.1548 34.0402C33.0821 33.3206 32.7446 32.6536 32.2079 32.1688C31.6711 31.684 30.9733 31.4159 30.25 31.4167H29.0833C28.9286 31.4167 28.7803 31.3552 28.6709 31.2458C28.5615 31.1364 28.5 30.9881 28.5 30.8333C28.5 30.6786 28.5615 30.5303 28.6709 30.4209C28.7803 30.3115 28.9286 30.25 29.0833 30.25ZM42.5 32H39V21.5C39.0008 21.2944 38.9473 21.0923 38.8449 20.914C38.7424 20.7358 38.5947 20.5878 38.4167 20.485C38.2393 20.3826 38.0381 20.3287 37.8333 20.3287C37.6285 20.3287 37.4274 20.3826 37.25 20.485L33.75 22.4917L30.25 20.485C30.0726 20.3826 29.8715 20.3287 29.6667 20.3287C29.4619 20.3287 29.2607 20.3826 29.0833 20.485L25.5833 22.4917L22.0833 20.485C21.906 20.3826 21.7048 20.3287 21.5 20.3287C21.2952 20.3287 21.094 20.3826 20.9167 20.485C20.7386 20.5878 20.5909 20.7358 20.4885 20.914C20.386 21.0923 20.3325 21.2944 20.3333 21.5V40.1667C20.3333 41.0949 20.7021 41.9852 21.3585 42.6415C22.0148 43.2979 22.9051 43.6667 23.8333 43.6667H40.1667C41.0949 43.6667 41.9852 43.2979 42.6415 42.6415C43.2979 41.9852 43.6667 41.0949 43.6667 40.1667V33.1667C43.6667 32.8573 43.5438 32.5605 43.325 32.3417C43.1062 32.1229 42.8094 32 42.5 32ZM23.8333 41.3333C23.5239 41.3333 23.2272 41.2104 23.0084 40.9916C22.7896 40.7728 22.6667 40.4761 22.6667 40.1667V23.5183L25 24.8483C25.1801 24.9424 25.3802 24.9915 25.5833 24.9915C25.7865 24.9915 25.9866 24.9424 26.1667 24.8483L29.6667 22.8417L33.1667 24.8483C33.3467 24.9424 33.5469 24.9915 33.75 24.9915C33.9531 24.9915 34.1533 24.9424 34.3333 24.8483L36.6667 23.5183V40.1667C36.6698 40.5647 36.7408 40.9592 36.8767 41.3333H23.8333ZM41.3333 40.1667C41.3333 40.4761 41.2104 40.7728 40.9916 40.9916C40.7728 41.2104 40.4761 41.3333 40.1667 41.3333C39.8572 41.3333 39.5605 41.2104 39.3417 40.9916C39.1229 40.7728 39 40.4761 39 40.1667V34.3333H41.3333V40.1667Z"
|
||||
fill="#5B9A74"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconBill
|
||||
|
||||
@ -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'
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
import { IconBell } from 'src/components/icons'
|
||||
import s from '../NotificationEmptyPage/NotificationEmptyPage.module.scss'
|
||||
|
||||
|
||||
const NotificationEmptyPage = () => {
|
||||
return (
|
||||
<section className={s.emptyPage}>
|
||||
<div className={s.emptyIcon}>
|
||||
<IconBell />
|
||||
</div>
|
||||
<div className={s.emptyContent}>
|
||||
<p>Your Notification is empty</p>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
export default NotificationEmptyPage
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<section className={ClassNames({
|
||||
[s.notificationItem] : true,
|
||||
[s.isChecked] : isChecked,
|
||||
})}
|
||||
onClick = {Check}
|
||||
>
|
||||
<div className={s.icon}>
|
||||
<IconBill />
|
||||
</div>
|
||||
<Link href={link}>
|
||||
<div className={s.contentWrapper}>
|
||||
<div className={s.title}>
|
||||
{title}
|
||||
</div>
|
||||
<div className={s.content}>
|
||||
{content}
|
||||
</div>
|
||||
<div className={s.date}>
|
||||
{date}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotificationItem
|
||||
@ -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 ?
|
||||
<NotificationEmptyPage />
|
||||
:
|
||||
<>
|
||||
{
|
||||
data.map(item => {
|
||||
return (
|
||||
<NotificationItem key={`${item.ID}-${item.title}`} title={item.title} content={item.content} date={item.date} link={item.link} checked={item.checked}/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotificationPage
|
||||
2
src/components/modules/Notification/index.tsx
Normal file
2
src/components/modules/Notification/index.tsx
Normal file
@ -0,0 +1,2 @@
|
||||
export { default as NotificationPage } from './NotificationPage/NotificationPage'
|
||||
export { default as NotificationEmptyPage } from './NotificationEmptyPage/NotificationEmptyPage'
|
||||
Loading…
x
Reference in New Issue
Block a user