Add code for website's root layout

udohjeremiah · Nov 4, 2023 · 707fbdb · 707fbdb
1 parent 984466e
commit 707fbdb
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 7 deletions.
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -1,18 +1,39 @@
 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({
   subsets: ["latin"],
   display: "swap",
 });
 
+const monoton = Monoton({
+  subsets: ["latin"],
+  display: "swap",
+  weight: "400",
+  variable: "--font-monoton",
+});
+
 export default function RootLayout({ children }) {
-  <html lang="en">
-    <body className={inter.className}>{children}</body>
-  </html>;
+  return (
+    <html lang="en">
+      <body
+        className={`${inter.className} ${monoton.variable} flex min-h-screen max-w-[100vw] flex-col bg-white text-slate-600 antialiased dark:bg-slate-800 dark:text-slate-300`}
+      >
+        <ThemeProvider>
+          <Header />
+          <main>{children}</main>
+          <Footer />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
 }
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,3 @@
+export default function Header() {
+  return <div>Footer</div>;
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,3 @@
+export default function Header() {
+  return <div>Header</div>;
+}
diff --git a/src/providers/ThemeProvider.jsx 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 (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
diff --git 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: [],
 };