feat: update fixing error

2025-09-24 05:21:17 +07:00 · 2025-09-24 05:21:17 +07:00 · f3f41062cf
parent a6e5e7e319
commit f3f41062cf
6 changed files with 128 additions and 69 deletions
--- 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({
          />
        </noscript>
      </head>
-      <body className={`${inter.className} dashcode-app`}>
+      <body className={`${inter.className} dashcode-app`} suppressHydrationWarning={true}>
        <NextIntlClientProvider messages={messages} locale={locale}>
          <AuthProvider>
-            <ThemeProvider attribute="class" defaultTheme="light">
+            <ThemeProvider attribute="class" defaultTheme="light" enableSystem={true} disableTransitionOnChange>
              <DirectionProvider direction={direction}>
                {children}
              </DirectionProvider>
--- 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 (
-    <html lang="in">
-      <body className={`${inter.className} dashcode-app`}>
-        {children}
-      </body>
-    </html>
-  );
+  return children;
 }
--- 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;
 }
--- a/components/client-only.tsx
+++ 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}</>;
+}
--- 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<string>("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 (
-    <Select onValueChange={onSelectChange} value={selectedLang}>
-      <SelectTrigger className="w-[94px] border-none read-only:bg-transparent">
-        <SelectValue placeholder="Select a language" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="in" className="border-none">
-          <div className="flex items-center gap-1">
-            <Image
-              src="/flag-3.png"
-              alt="flag"
-              width={24}
-              height={24}
-              className="w-6 h-6 rounded-full"
-            />
-            <span className="font-medium text-sm text-default-600 dark:text-default-700">
-              In
-            </span>
-          </div>
-        </SelectItem>
-        <SelectItem value="en" className="border-none">
-          <div className="flex items-center gap-1">
-            <Image
-              src="/flag-1.png"
-              alt="flag"
-              width={24}
-              height={24}
-              className="w-6 h-6 rounded-full"
-            />
-            <span className="font-medium text-sm text-default-600 dark:text-default-700">
-              En
-            </span>
-          </div>
-        </SelectItem>
+    <ClientOnly fallback={
+      <Select onValueChange={() => {}} value="in">
+        <SelectTrigger className="w-[94px] border-none read-only:bg-transparent">
+          <SelectValue placeholder="Select a language" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="in" className="border-none">
+            <div className="flex items-center gap-1">
+              <Image
+                src="/flag-3.png"
+                alt="flag"
+                width={24}
+                height={24}
+                className="w-6 h-6 rounded-full"
+              />
+              <span className="font-medium text-sm text-default-600 dark:text-default-700">
+                In
+              </span>
+            </div>
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    }>
+      <Select onValueChange={onSelectChange} value={selectedLang}>
+        <SelectTrigger className="w-[94px] border-none read-only:bg-transparent">
+          <SelectValue placeholder="Select a language" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="in" className="border-none">
+            <div className="flex items-center gap-1">
+              <Image
+                src="/flag-3.png"
+                alt="flag"
+                width={24}
+                height={24}
+                className="w-6 h-6 rounded-full"
+              />
+              <span className="font-medium text-sm text-default-600 dark:text-default-700">
+                In
+              </span>
+            </div>
+          </SelectItem>
+          <SelectItem value="en" className="border-none">
+            <div className="flex items-center gap-1">
+              <Image
+                src="/flag-1.png"
+                alt="flag"
+                width={24}
+                height={24}
+                className="w-6 h-6 rounded-full"
+              />
+              <span className="font-medium text-sm text-default-600 dark:text-default-700">
+                En
+              </span>
+            </div>
+          </SelectItem>

-        {/* <SelectItem value="ar">
-                    <div className='flex items-center gap-1'>
-                        <Image
-                            src="/images/all-img/flag-2.png"
-                            alt='flag'
-                            width={24}
-                            height={24}
-                            className='w-6 h-6 rounded-full'
-                        />
-                        <span className='font-medium text-sm text-default-600 dark:text-default-700'>Ar</span>
-                    </div>
-                </SelectItem> */}
-      </SelectContent>
-    </Select>
+          {/* <SelectItem value="ar">
+                      <div className='flex items-center gap-1'>
+                          <Image
+                              src="/images/all-img/flag-2.png"
+                              alt='flag'
+                              width={24}
+                              height={24}
+                              className='w-6 h-6 rounded-full'
+                          />
+                          <span className='font-medium text-sm text-default-600 dark:text-default-700'>Ar</span>
+                      </div>
+                  </SelectItem> */}
+        </SelectContent>
+      </Select>
+    </ClientOnly>
  );
 }
--- 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 (
+    <ClientOnly fallback={
+      <Button size="icon" rounded="full" className="md:bg-transparent bg-transparent text-secondary-foreground hover:ring-0 md:h-8 md:w-8 h-auto w-auto text-default-900 hover:bg-secondary hover:ring-offset-0">
+        <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    }>
+      <ThemeButton />
+    </ClientOnly>
+  );
+}