diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index 6c2a9e7..fb720a0 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -5,6 +5,7 @@ import { ThemeProvider } from "@/providers/theme-provider"; import MountedProvider from "@/providers/mounted.provider"; import { Toaster } from "@/components/ui/toaster"; import { Toaster as SonnerToaster } from "@/components/ui/sonner"; + const inter = Inter({ subsets: ["latin"], display: 'swap', @@ -74,10 +75,10 @@ export default async function RootLayout({ /> - + - + {children} diff --git a/app/layout.tsx b/app/layout.tsx index a5dccd6..1f471dd 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,13 +1,4 @@ import type { Metadata } from "next"; -import { Inter } from "next/font/google"; -import "./[locale]/globals.css"; - -const inter = Inter({ - subsets: ["latin"], - display: 'swap', - preload: true, - fallback: ['system-ui', 'arial'] -}); export const metadata: Metadata = { title: "NetidHub", @@ -20,11 +11,5 @@ export default function RootLayout({ }: { children: React.ReactNode; }) { - return ( - - - {children} - - - ); + return children; } diff --git a/components/auto-redirect.tsx b/components/auto-redirect.tsx index 6aae662..c347b1f 100644 --- a/components/auto-redirect.tsx +++ b/components/auto-redirect.tsx @@ -1,12 +1,19 @@ 'use client'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { useRouter } from '@/components/navigation'; export default function AutoRedirect() { const router = useRouter(); + const [mounted, setMounted] = useState(false); useEffect(() => { + setMounted(true); + }, []); + + useEffect(() => { + if (!mounted) return; + // Get current pathname without locale const pathname = window.location.pathname; const segments = pathname.split('/').filter(Boolean); @@ -20,7 +27,7 @@ export default function AutoRedirect() { const newPath = `/in${pathname}`; router.replace(newPath); } - }, [router]); + }, [mounted, router]); return null; } diff --git a/components/client-only.tsx b/components/client-only.tsx new file mode 100644 index 0000000..2218223 --- /dev/null +++ b/components/client-only.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { useEffect, useState } from "react"; + +interface ClientOnlyProps { + children: React.ReactNode; + fallback?: React.ReactNode; +} + +export default function ClientOnly({ children, fallback = null }: ClientOnlyProps) { + const [hasMounted, setHasMounted] = useState(false); + + useEffect(() => { + setHasMounted(true); + }, []); + + if (!hasMounted) { + return <>{fallback}; + } + + return <>{children}; +} diff --git a/components/partials/header/locale-switcher.tsx b/components/partials/header/locale-switcher.tsx index 810be89..b727034 100644 --- a/components/partials/header/locale-switcher.tsx +++ b/components/partials/header/locale-switcher.tsx @@ -15,6 +15,7 @@ import { } from "@/components/ui/select"; import Image from "next/image"; import Cookies from "js-cookie"; +import ClientOnly from "@/components/client-only"; export const getLanguage = (): string | null => { if (typeof window === "undefined") return null; @@ -35,8 +36,15 @@ export default function LocalSwitcher() { const [selectedLang, setSelectedLang] = useState("in"); const searchParams = useSearchParams(); const [hasInitialized, setHasInitialized] = useState(false); + const [mounted, setMounted] = useState(false); useEffect(() => { + setMounted(true); + }, []); + + useEffect(() => { + if (!mounted) return; + const storedLang = getLanguage(); let joinParam = ""; @@ -67,7 +75,7 @@ export default function LocalSwitcher() { } setHasInitialized(true); } - }, []); + }, [mounted]); const onSelectChange = (nextLocale: string) => { setLanguage(nextLocale); @@ -77,53 +85,77 @@ export default function LocalSwitcher() { }); }; return ( - + }> + + {/* +
+ flag + Ar +
+ */} + + + ); } diff --git a/components/partials/header/theme-switcher.tsx b/components/partials/header/theme-switcher.tsx index 3168ea5..1c2c78f 100644 --- a/components/partials/header/theme-switcher.tsx +++ b/components/partials/header/theme-switcher.tsx @@ -9,6 +9,7 @@ import { Moon, Sun } from "lucide-react"; import { Check } from "lucide-react"; import { cn } from "@/lib/utils"; import { Icon } from "@/components/ui/icon"; +import ClientOnly from "@/components/client-only"; const ThemeButton = () => { const { theme, setTheme } = useTheme(); @@ -69,4 +70,15 @@ const ThemeButton = () => { ); }; -export default ThemeButton; +export default function ThemeSwitcher() { + return ( + + + Toggle theme + + }> + + + ); +}