soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(i18n): Complete localization of marketing frontend with react-i18next, prefixed URLs, JSON migrations, and automation

Browse Source
This commit is contained in:
Codex Agent
2025-10-03 13:05:13 +02:00
parent 1845d83583
commit 60f8de9162
46 changed files with 3454 additions and 590 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
resources/js/components/Layout/Header.tsx Normal file
View File

@@ -0,0 +1,153 @@
import React from 'react';
import { usePage } from '@inertiajs/react';
import { Link, router } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { useAppearance } from '@/hooks/use-appearance';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Sun, Moon } from 'lucide-react';
import { cn } from '@/lib/utils';
const Header: React.FC = () => {
const { auth, locale } = usePage().props as any;
const { t } = useTranslation('auth');
const { appearance, updateAppearance } = useAppearance();
const toggleTheme = () => {
const newAppearance = appearance === 'dark' ? 'light' : 'dark';
updateAppearance(newAppearance);
};
const handleLanguageChange = (value: string) => {
router.visit(`/${value}`, { preserveState: true, replace: true });
};
const handleLogout = () => {
router.post(`/${locale}/logout`);
};
return (
<header className="fixed top-0 z-50 w-full bg-white dark:bg-gray-900 shadow-lg border-b-2 border-gray-200 dark:border-gray-700">
<div className="container mx-auto px-4 py-4">
<div className="flex justify-between items-center">
<Link href={`/${locale}`} className="text-2xl font-bold text-gray-800 dark:text-gray-200">
Fotospiel
</Link>
<nav className="flex space-x-8">
<Link href={`/${locale}`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
Home
</Link>
<Link href={`/${locale}/packages`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
Pakete
</Link>
<Link href={`/${locale}/blog`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
Blog
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
Anlässe
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem asChild>
<Link href={`/${locale}/anlaesse/hochzeit`}>
Hochzeit
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href={`/${locale}/anlaesse/geburtstag`}>
Geburtstag
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href={`/${locale}/anlaesse/firmenevent`}>
Firmenevent
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Link href={`/${locale}/kontakt`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
Kontakt
</Link>
</nav>
<div className="flex items-center space-x-4">
<Button
variant="ghost"
size="icon"
onClick={toggleTheme}
className="h-8 w-8"
>
<Sun className={cn("h-4 w-4", appearance === "dark" && "hidden")} />
<Moon className={cn("h-4 w-4", appearance !== "dark" && "hidden")} />
<span className="sr-only">Theme Toggle</span>
</Button>
<Select value={locale} onValueChange={handleLanguageChange}>
<SelectTrigger className="w-[70px] h-8">
<SelectValue placeholder="DE" />
</SelectTrigger>
<SelectContent>
<SelectItem value="de">DE</SelectItem>
<SelectItem value="en">EN</SelectItem>
</SelectContent>
</Select>
{auth.user ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
<Avatar className="h-8 w-8">
<AvatarImage src={auth.user.avatar} alt={auth.user.name} />
<AvatarFallback>{auth.user.name.charAt(0)}</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end" forceMount>
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">{auth.user.name}</p>
<p className="text-xs leading-none text-muted-foreground">{auth.user.email}</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="/profile">
Profil
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/profile/orders">
Bestellungen
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleLogout}>
Abmelden
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
) : (
<>
<Link
href={`/${locale}/login`}
className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
>
{t('header.login')}
</Link>
<Link
href={`/${locale}/register`}
className="bg-pink-500 text-white px-4 py-2 rounded hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700"
>
{t('header.register')}
</Link>
</>
)}
</div>
</div>
</div>
</header>
);
};
export default Header;