crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: add spacing

Browse Source
This commit is contained in:
unknown 2021-09-14 17:15:40 +07:00
parent ff5deb2312
commit d6f0ef298d
9 changed files with 61 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
pages/notification.tsx
View File

@ -1,13 +0,0 @@
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;

16
pages/notifications.tsx Normal file
View File

@ -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 (
<>
<NotificationBreadcrumb />
<NotificationPage />
</>
)
}
Notification.Layout = Layout
export default Notification;

7
src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss Normal file
View File

@ -0,0 +1,7 @@
@import "../../../../styles/utilities";
.breadCrumbWrapper {
@apply py-12 spacing-horizontal;
@screen lg {
padding-left: 3.2rem;
}
}

16
src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx Normal file
View File

@ -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 (
<section className={s.breadCrumbWrapper}>
<BreadcrumbCommon crumbs={NOTIFICATION_DATA} showHomePage={true}/>
</section>
)
}
export default NotificationBreadcrumb

4
src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss
View File

@ -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);
}

7
src/components/modules/Notification/NotificationItem/NotificationItem.module.scss
View File

@ -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 {

8
src/components/modules/Notification/NotificationItem/NotificationItem.tsx
View File

@ -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,7 +28,8 @@ const NotificationItem = ({ ID, title, content, date, link, checked}: Notificati
<div className={s.icon}>
<IconBill />
</div>
<Link href={link}>
<Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`}>
<a>
<div className={s.contentWrapper}>
<div className={s.title}>
{title}
@ -40,6 +41,7 @@ const NotificationItem = ({ ID, title, content, date, link, checked}: Notificati
{date}
</div>
</div>
</a>
</Link>
</section>

6
src/components/modules/Notification/NotificationPage/NotificationPage.tsx
View File

@ -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 (
<NotificationItem key={`${item.ID}-${item.title}`} title={item.title} content={item.content} date={item.date} link={item.link} checked={item.checked}/>
<NotificationItem key={`${item.ID}-${item.title}`} title={item.title} content={item.content} date={item.date} checked={item.checked}/>
)
})
}

2
src/components/modules/Notification/index.tsx
View File

@ -1,2 +1,4 @@
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'