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 ( +
+
+

{currentPage}

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