Admin header

src/components/Global/AdminHeader/AdminHeader.module.scss

@@ -0,0 +1,11 @@
+@import '../../../styles/abstracts/_mixins/text';
+@import '../../../styles/abstracts/variables';
+
+.pageName {
+  @include font-header-extra-bold;
+  width: 100vw;
+  height: 3.4rem;
+  padding: 0 1.5rem 3rem;
+  font-size: 1.5rem;
+  border-bottom: $grey-transparency 1px solid;
+}

src/components/Global/AdminHeader/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './AdminHeader.module.scss';
+
+const AdminHeader = () => {
+  const currentPage = 'Admin Dashboard';
+  return (
+    <div>
+      <div className={styles.pageName}>
+        <p>{currentPage}</p>
+      </div>
+    </div>
+  );
+};
+
+export default AdminHeader;

src/components/Global/index.tsx

@@ -10,6 +10,7 @@ import LogStatusButton from './LogStatusButton';
 import SearchAndFilter from './SearchAndFilter';
 import Difficulty from './Difficulty';
 import Loading from './Loading';
+import AdminHeader from './AdminHeader';
 import Sidebar from './Sidebar';
 
 export {
@@ -25,5 +26,6 @@ export {
   SearchAndFilter,
   Difficulty,
   Loading,
+  AdminHeader
   Sidebar
 };

src/pages/admin/index.tsx

@@ -9,15 +9,15 @@ import {
 } from '../../components/App';
 import { getAllPuzzles, isAdmin } from '../../services';
 import { GetServerSideProps } from 'next';
-import { Header } from '../../components/Global';
+import { AdminHeader, Header } from '../../components/Global';
 import type { PuzzleCustom } from '../../types/api/puzzles/puzzle';
 
 const Admin = ({ puzzlesList }: { puzzlesList: PuzzleCustom[] }) => {
   const [modalIsOpen, setModalIsOpen] = React.useState(false);
   return (
     <>
       <Header />
-      {/** TODO: Create Header for admin page  */}
+      <AdminHeader />
       <h1 className={styles.adminTitle}>Admin Dashboard</h1>
       <div className={styles.contentWrap}>
         <div className={styles.contentLeftWrap}>