diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 6fdd915..29b5d5f 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -1,9 +1,13 @@
import "./globals.css";
-import { Inter } from "next/font/google";
+import { Inter, Monoton } from "next/font/google";
+import { ThemeProvider } from "@/providers/ThemeProvider";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
export const metadata = {
- title: "",
- description: "",
+ title: "Elevate Your Exams | ExamShare",
+ description:
+ "An open-source project for sharing past examination questions in higher education",
};
const inter = Inter({
@@ -11,8 +15,25 @@ const inter = Inter({
display: "swap",
});
+const monoton = Monoton({
+ subsets: ["latin"],
+ display: "swap",
+ weight: "400",
+ variable: "--font-monoton",
+});
+
export default function RootLayout({ children }) {
-
- {children}
- ;
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ );
}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..b869251
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,3 @@
+export default function Header() {
+ return Footer
;
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..cbd4d3c
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,3 @@
+export default function Header() {
+ return Header
;
+}
diff --git a/src/providers/ThemeProvider.jsx b/src/providers/ThemeProvider.jsx
new file mode 100644
index 0000000..53bc8b6
--- /dev/null
+++ b/src/providers/ThemeProvider.jsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect } from "react";
+
+const ThemeContext = createContext();
+
+export function useTheme() {
+ return useContext(ThemeContext);
+}
+
+export function ThemeProvider({ children }) {
+ const [theme, setTheme] = useState(localStorage.getItem("theme") || "os");
+
+ useEffect(() => {
+ if (theme === "os") {
+ localStorage.removeItem("theme");
+ } else if (theme === "light" || theme === "dark") {
+ localStorage.setItem("theme", theme);
+ } else {
+ throw new Error("Invalid theme");
+ }
+
+ const updateThemeFromOS = (e) => {
+ if (!localStorage.getItem("theme")) {
+ e.matches
+ ? document.documentElement.classList.add("dark")
+ : document.documentElement.classList.remove("dark");
+ }
+ };
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+ updateThemeFromOS(mediaQuery);
+ mediaQuery.addEventListener("change", updateThemeFromOS);
+
+ if (
+ theme === "dark" ||
+ (!("theme" in localStorage) &&
+ window.matchMedia("(prefers-color-scheme: dark)").matches)
+ ) {
+ document.documentElement.classList.add("dark");
+ } else {
+ document.documentElement.classList.remove("dark");
+ }
+
+ return () => {
+ mediaQuery.removeEventListener("change", updateThemeFromOS);
+ };
+ }, [theme]);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index d092c48..945540d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,11 @@ module.exports = {
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
- extend: {},
+ extend: {
+ fontFamily: {
+ monoton: ["var(--font-monoton)", "sans-serif"],
+ },
+ },
},
plugins: [],
};