diff --git a/src/components/Global/AdminHeader/AdminHeader.module.scss b/src/components/Global/AdminHeader/AdminHeader.module.scss
new file mode 100644
index 0000000..0e65bac
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Global/AdminHeader/index.tsx b/src/components/Global/AdminHeader/index.tsx
new file mode 100644
index 0000000..b8aa90d
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default AdminHeader;
diff --git a/src/components/Global/index.tsx b/src/components/Global/index.tsx
index 191a5ef..4f6bfa4 100644
--- a/src/components/Global/index.tsx
+++ b/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
};
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index a1a7c8b..dff2cd0 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -9,7 +9,7 @@ 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[] }) => {
@@ -17,7 +17,7 @@ const Admin = ({ puzzlesList }: { puzzlesList: PuzzleCustom[] }) => {
return (
<>
- {/** TODO: Create Header for admin page */}
+
Admin Dashboard