update to again

ipipi2024 · Nov 13, 2024 · 31832fa · 31832fa
1 parent 282f856
commit 31832fa
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 26 deletions.
diff --git a/components/shared/Footer.tsx b/components/shared/Footer.tsx
@@ -3,15 +3,27 @@
 import { useTheme } from "next-themes"
 import Image from "next/image"
 import Link from "next/link"
+import { useEffect, useState } from "react"
 
 const Footer = () => {
   const { theme } = useTheme();
+  const [isThemeLoaded, setIsThemeLoaded] = useState(false);
+
+  useEffect(() => {
+    // Ensure theme is set before rendering
+    setIsThemeLoaded(true);
+  }, [theme]);
+
+  if (!isThemeLoaded) {
+    return null; // Optionally, show a loading state here
+  }
+
   return (
     <footer className="border-t">
       <div className="flex-center wrapper flex-between flex flex-col gap-4 p-5 text-center sm:flex-row">
         <Link href='/'>
           <Image 
-            src={theme === "dark" ? "/assets/images/logo-white.svg"  : "/assets/images/logo.svg"} 
+            src={theme === "dark" ? "/assets/images/logo-white.svg" : "/assets/images/logo.svg"} 
             alt="logo"
             width={128}
             height={38}
@@ -24,4 +36,4 @@ const Footer = () => {
   )
 }
 
-export default Footer
+export default Footer;
diff --git a/components/shared/Header.tsx b/components/shared/Header.tsx
@@ -1,28 +1,37 @@
 "use client"
 
-import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs"
-import Image from "next/image"
-import Link from "next/link"
-import NavItems from "./NavItems"
-import MobileNav from "./MobileNav"
-import * as React from "react"
+import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
+import Image from "next/image";
+import Link from "next/link";
+import NavItems from "./NavItems";
+import MobileNav from "./MobileNav";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { ModeToggle } from "@/components/shared/ModeToggle";
+import { useTheme } from "next-themes";
 
-import { Button } from "@/components/ui/button"
-import { ModeToggle } from "@/components/shared/ModeToggle"
-import { useTheme } from "next-themes"
+const Header = () => {
+  const { theme, setTheme } = useTheme();
+  const [isThemeLoaded, setIsThemeLoaded] = React.useState(false);
 
+  React.useEffect(() => {
+    // Ensure the theme is set before rendering
+    setIsThemeLoaded(true);
+  }, [theme]);
+
+  if (!isThemeLoaded) {
+    return null; // Optionally return a loader or empty state until the theme is loaded
+  }
 
-const Header = () => {
-  const { theme } = useTheme();
   return (
     <header className="w-full border-b">
       <div className="wrapper flex items-center justify-between">
         <Link href="/" className="w-36">
-          <Image 
-            src={theme === "dark" ? "/assets/images/logo-white.svg"  : "/assets/images/logo.svg"} 
-            width={128} 
-            height={38} 
-            alt="Evently logo" 
+          <Image
+            src={theme === "dark" ? "/assets/images/logo-white.svg" : "/assets/images/logo.svg"}
+            width={128}
+            height={38}
+            alt="Evently logo"
           />
         </Link>
 
@@ -34,7 +43,7 @@ const Header = () => {
 
         <div className="flex items-center gap-3">
           <ModeToggle />
-          
+
           <SignedIn>
             <UserButton afterSignOutUrl="/" />
             <MobileNav />
@@ -50,7 +59,7 @@ const Header = () => {
         </div>
       </div>
     </header>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/components/shared/MobileNav.tsx b/components/shared/MobileNav.tsx
@@ -4,17 +4,25 @@ import { useTheme } from "next-themes";
 import {
     Sheet,
     SheetContent,
-    SheetDescription,
-    SheetHeader,
-    SheetTitle,
     SheetTrigger,
 } from "@/components/ui/sheet";
 import Image from "next/image";
 import { Separator } from "../ui/separator";
 import NavItems from "./NavItems";
+import { useEffect, useState } from "react";
 
 const MobileNav = () => {
     const { theme } = useTheme();
+    const [isThemeLoaded, setIsThemeLoaded] = useState(false);
+
+    useEffect(() => {
+        // Ensure theme is set before rendering
+        setIsThemeLoaded(true);
+    }, [theme]);
+
+    if (!isThemeLoaded) {
+        return null; // Optionally, show a loading state here
+    }
 
     return (
         <nav className="md:hidden">
@@ -30,7 +38,7 @@ const MobileNav = () => {
                 </SheetTrigger>
                 <SheetContent className="dark:bg-gray-900 flex flex-col gap-6 bg-white md:hidden">
                     <Image 
-                        src={theme === "dark" ?"/assets/images/logo-white.svg"  : "/assets/images/logo.svg"}
+                        src={theme === "dark" ? "/assets/images/logo-white.svg" : "/assets/images/logo.svg"}
                         alt="logo"
                         width={128}
                         height={38}