Merge branch 'main' into fix/update-site-seo

src/App.jsx

@@ -1,12 +1,15 @@
 import React from "react"; 
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createContext, useContext, useEffect } from "react";
 import Home from "./pages/Home";
 import CreateBlogs from "./pages/CreateBlogs";
 import PageNotFound from "./pages/PageNotFound";
 import Login from "./pages/Login"; // Import Login
 import Register from "./pages/Register"; //Import Register
 import Layout from "./Layout"; // Import the layout component
 
+export const ThemeContext = createContext();
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -25,6 +28,16 @@ const router = createBrowserRouter([
 ]);
 
 function App() {
+  const { theme } = useContext(ThemeContext);
+
+  useEffect(() => {
+    if (theme === "dark") {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
+  }, [theme]);
+
   return (
     <>
       <RouterProvider router={router} />

src/components/LoginForm.jsx

@@ -32,7 +32,7 @@ const LoginForm = () => {
   };
 
   return (
-    <div className={` px-10 py-20 rounded-3xl border-2 border-gray-200`}>
+    <div className={` px-10 py-10 mt-20 rounded-3xl border-2 border-gray-200`}>
       <h1 className="text-5xl font-semibold">Welcome to Dev Blogs!</h1>
       <p className="font-medium text-lg text-gray-500 mt-4">
         Please enter your Details

src/components/NavBar.jsx

@@ -1,39 +1,21 @@
+
 import React, { useEffect, useState } from "react";
+
+import { useContext } from "react";
+import { ThemeContext } from "../App";
+
 import { useNavigate } from "react-router-dom";
 import Sun from "./svgs/Sun";
 import Moon from "./svgs/Moon";
 
 const NavBar = () => {
-  const [isDarkMode, setIsDarkMode] = useState(false);
+  const { theme, toggleTheme } = useContext(ThemeContext);
   const navigate = useNavigate(); // Initialize useNavigate
 
-  useEffect(() => {
-    const savedTheme = localStorage.getItem("theme");
-    if (savedTheme === "dark") {
-      document.documentElement.classList.add("dark");
-      setIsDarkMode(true);
-    } else {
-      document.documentElement.classList.remove("dark");
-      setIsDarkMode(false);
-    }
-  }, []);
-
-  const toggleDarkMode = () => {
-    if (isDarkMode) {
-      document.documentElement.classList.remove("dark");
-      localStorage.setItem("theme", "light");
-      setIsDarkMode(false);
-    } else {
-      document.documentElement.classList.add("dark");
-      localStorage.setItem("theme", "dark");
-      setIsDarkMode(true);
-    }
-  };
-
   return (
     <nav
       className={`fixed z-50 w-full flex justify-between items-center px-4 sm:px-12 h-20 py-4 ${
-        isDarkMode ? "bg-secondary text-white" : "bg-white text-black"
+        theme == "dark" ? "bg-secondary text-white" : "bg-white text-black"
       }`}
     >
       <img
@@ -46,13 +28,15 @@ const NavBar = () => {
       <div className="flex">
         {/* Dark Mode Toggle Button */}
         <button
-          onClick={toggleDarkMode}
+          onClick={toggleTheme}
           aria-label="theme toggler"
           className={`flex h-10 w-11 mr-3 sm:mr-5 items-center justify-center rounded-lg border duration-300 hover:bg-stroke sm:flex ${
-            !isDarkMode ? "border-stroke bg-white" : "bg-dark-2 border-dark-2"
+            theme == "light"
+              ? "border-stroke bg-white"
+              : "bg-dark-2 border-dark-2"
           }`}
         >
-          {isDarkMode ? (
+          {theme == "dark" ? (
             <Sun className="fill-white" />
           ) : (
             <Moon className="fill-primary" />

src/context/ThemeProvider.jsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { ThemeContext } from "../App";
+
+const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState("light");
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;

src/main.jsx

@@ -1,9 +1,12 @@
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.jsx";
+import ThemeProvider from "./context/ThemeProvider.jsx";
 import "./index.css";
 createRoot(document.getElementById("root")).render(
   <StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </StrictMode>
 );

src/pages/Login.jsx

@@ -3,8 +3,8 @@ import LoginForm from "../components/LoginForm";
 
 const Login = () => {
   return (
-    <div className="flex w-full h-screen">
-      <div className="w-full mt-20 flex items-center justify-center ">
+    <div className=" w-full h-screen">
+      <div className="w-full flex items-center justify-center ">
         <LoginForm />
       </div>
     </div>