kontenhumas
/
kontenhumas-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update fixing error

This commit is contained in:
hanif salafi 2025-09-24 05:21:17 +07:00
parent a6e5e7e319
commit f3f41062cf
6 changed files with 128 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/[locale]/layout.tsx
View File

@ -5,6 +5,7 @@ import { ThemeProvider } from "@/providers/theme-provider";
import MountedProvider from "@/providers/mounted.provider"; import MountedProvider from "@/providers/mounted.provider";
import { Toaster } from "@/components/ui/toaster"; import { Toaster } from "@/components/ui/toaster";
import { Toaster as SonnerToaster } from "@/components/ui/sonner"; import { Toaster as SonnerToaster } from "@/components/ui/sonner";
const inter = Inter({ const inter = Inter({
subsets: ["latin"], subsets: ["latin"],
display: 'swap', display: 'swap',
@ -74,10 +75,10 @@ export default async function RootLayout({
/> />
</noscript> </noscript>
</head> </head>
<body className={`${inter.className} dashcode-app`}> <body className={`${inter.className} dashcode-app`} suppressHydrationWarning={true}>
<NextIntlClientProvider messages={messages} locale={locale}> <NextIntlClientProvider messages={messages} locale={locale}>
<AuthProvider> <AuthProvider>
<ThemeProvider attribute="class" defaultTheme="light"> <ThemeProvider attribute="class" defaultTheme="light" enableSystem={true} disableTransitionOnChange>
<DirectionProvider direction={direction}> <DirectionProvider direction={direction}>
{children} {children}
</DirectionProvider> </DirectionProvider>

17
app/layout.tsx
View File

@ -1,13 +1,4 @@
import type { Metadata } from "next"; 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 = { export const metadata: Metadata = {
title: "NetidHub", title: "NetidHub",
@ -20,11 +11,5 @@ export default function RootLayout({
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return children;
<html lang="in">
<body className={`${inter.className} dashcode-app`}>
{children}
</body>
</html>
);
} }

11
components/auto-redirect.tsx
View File

@ -1,12 +1,19 @@
'use client'; 'use client';
import { useEffect } from 'react'; import { useEffect, useState } from 'react';
import { useRouter } from '@/components/navigation'; import { useRouter } from '@/components/navigation';
export default function AutoRedirect() { export default function AutoRedirect() {
const router = useRouter(); const router = useRouter();
const [mounted, setMounted] = useState(false);
useEffect(() => { useEffect(() => {
setMounted(true);
}, []);
useEffect(() => {
if (!mounted) return;
// Get current pathname without locale // Get current pathname without locale
const pathname = window.location.pathname; const pathname = window.location.pathname;
const segments = pathname.split('/').filter(Boolean); const segments = pathname.split('/').filter(Boolean);
@ -20,7 +27,7 @@ export default function AutoRedirect() {
const newPath = `/in${pathname}`; const newPath = `/in${pathname}`;
router.replace(newPath); router.replace(newPath);
} }
}, [router]); }, [mounted, router]);
return null; return null;
} }

22
components/client-only.tsx Normal file
View File

@ -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}</>;
}

128
components/partials/header/locale-switcher.tsx
View File

@ -15,6 +15,7 @@ import {
} from "@/components/ui/select"; } from "@/components/ui/select";
import Image from "next/image"; import Image from "next/image";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import ClientOnly from "@/components/client-only";
export const getLanguage = (): string | null => { export const getLanguage = (): string | null => {
if (typeof window === "undefined") return null; if (typeof window === "undefined") return null;
@ -35,8 +36,15 @@ export default function LocalSwitcher() {
const [selectedLang, setSelectedLang] = useState<string>("in"); const [selectedLang, setSelectedLang] = useState<string>("in");
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [hasInitialized, setHasInitialized] = useState(false); const [hasInitialized, setHasInitialized] = useState(false);
const [mounted, setMounted] = useState(false);
useEffect(() => { useEffect(() => {
setMounted(true);
}, []);
useEffect(() => {
if (!mounted) return;
const storedLang = getLanguage(); const storedLang = getLanguage();
let joinParam = ""; let joinParam = "";
@ -67,7 +75,7 @@ export default function LocalSwitcher() {
} }
setHasInitialized(true); setHasInitialized(true);
} }
}, []); }, [mounted]);
const onSelectChange = (nextLocale: string) => { const onSelectChange = (nextLocale: string) => {
setLanguage(nextLocale); setLanguage(nextLocale);
@ -77,53 +85,77 @@ export default function LocalSwitcher() {
}); });
}; };
return ( return (
<Select onValueChange={onSelectChange} value={selectedLang}> <ClientOnly fallback={
<SelectTrigger className="w-[94px] border-none read-only:bg-transparent"> <Select onValueChange={() => {}} value="in">
<SelectValue placeholder="Select a language" /> <SelectTrigger className="w-[94px] border-none read-only:bg-transparent">
</SelectTrigger> <SelectValue placeholder="Select a language" />
<SelectContent> </SelectTrigger>
<SelectItem value="in" className="border-none"> <SelectContent>
<div className="flex items-center gap-1"> <SelectItem value="in" className="border-none">
<Image <div className="flex items-center gap-1">
src="/flag-3.png" <Image
alt="flag" src="/flag-3.png"
width={24} alt="flag"
height={24} width={24}
className="w-6 h-6 rounded-full" height={24}
/> className="w-6 h-6 rounded-full"
<span className="font-medium text-sm text-default-600 dark:text-default-700"> />
In <span className="font-medium text-sm text-default-600 dark:text-default-700">
</span> In
</div> </span>
</SelectItem> </div>
<SelectItem value="en" className="border-none"> </SelectItem>
<div className="flex items-center gap-1"> </SelectContent>
<Image </Select>
src="/flag-1.png" }>
alt="flag" <Select onValueChange={onSelectChange} value={selectedLang}>
width={24} <SelectTrigger className="w-[94px] border-none read-only:bg-transparent">
height={24} <SelectValue placeholder="Select a language" />
className="w-6 h-6 rounded-full" </SelectTrigger>
/> <SelectContent>
<span className="font-medium text-sm text-default-600 dark:text-default-700"> <SelectItem value="in" className="border-none">
En <div className="flex items-center gap-1">
</span> <Image
</div> src="/flag-3.png"
</SelectItem> 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"> {/* <SelectItem value="ar">
<div className='flex items-center gap-1'> <div className='flex items-center gap-1'>
<Image <Image
src="/images/all-img/flag-2.png" src="/images/all-img/flag-2.png"
alt='flag' alt='flag'
width={24} width={24}
height={24} height={24}
className='w-6 h-6 rounded-full' className='w-6 h-6 rounded-full'
/> />
<span className='font-medium text-sm text-default-600 dark:text-default-700'>Ar</span> <span className='font-medium text-sm text-default-600 dark:text-default-700'>Ar</span>
</div> </div>
</SelectItem> */} </SelectItem> */}
</SelectContent> </SelectContent>
</Select> </Select>
</ClientOnly>
); );
} }

14
components/partials/header/theme-switcher.tsx
View File

@ -9,6 +9,7 @@ import { Moon, Sun } from "lucide-react";
import { Check } from "lucide-react"; import { Check } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Icon } from "@/components/ui/icon"; import { Icon } from "@/components/ui/icon";
import ClientOnly from "@/components/client-only";
const ThemeButton = () => { const ThemeButton = () => {
const { theme, setTheme } = useTheme(); 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>
);
}