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

feat: Notifications title

Browse Source
This commit is contained in:
unknown 2021-09-14 17:26:47 +07:00
parent d6f0ef298d
commit 56cba86a1d
6 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pages/notifications.tsx
View File

@ -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 (
<>
<NotificationBreadcrumb />
<NotificationHeading />
<NotificationPage />
</>
)

9
src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss Normal file
View File

@ -0,0 +1,9 @@
@import "../../../../styles/utilities";
.headingWrapper {
@apply flex spacing-horizontal-left pb-16;
.heading{
max-width: 121.6rem;
flex-grow: 1;
}
}

18
src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx Normal file
View File

@ -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 (
<section className={s.headingWrapper}>
<div className={s.heading}>
<HeadingCommon>{heading}</HeadingCommon>
</div>
</section>
)
}
export default NotificationHeading

6
src/components/modules/Notification/NotificationPage/NotificationPage.module.scss Normal file
View File

@ -0,0 +1,6 @@
.notificationPage {
padding-bottom: 5.4rem;
@screen md {
padding-bottom: 12.8rem;
}
}

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

@ -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 (
<>
<div className={s.notificationPage}>
{
isEmpty ?
<NotificationEmptyPage />
@ -49,7 +49,7 @@ const NotificationPage = ({ isEmpty=false, data = NOTIFICATION_DATA }: Notificat
}
</>
}
</>
</div>
)
}

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

@ -2,3 +2,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'
export { default as NotificationHeading } from './NotificationHeading/NotificationHeading'