feat: Notifications title

pages/notifications.tsx

@@ -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 />
         </>
     )

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;
+    }
+}

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

src/components/modules/Notification/NotificationPage/NotificationPage.module.scss

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

src/components/modules/Notification/NotificationPage/NotificationPage.tsx

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

src/components/modules/Notification/index.tsx

@@ -1,4 +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 NotificationBreadcrumb } from './NotificationBreadcrum/NotificationBreadcrumb'
+export { default as NotificationHeading } from './NotificationHeading/NotificationHeading'