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

struktur der webseiten-js angepasst. filament aktualisiert.

Browse Source
This commit is contained in:
Codex Agent
2025-10-08 19:02:00 +02:00
parent b3e6b6b597
commit cee279cbab
42 changed files with 359 additions and 844 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
resources/js/components/Layout/AppLayout.tsx
View File

@@ -1,23 +0,0 @@
import React from 'react';
import { usePage } from '@inertiajs/react';
import Header from './Header';
interface AppLayoutProps {
children: React.ReactNode;
header?: React.ReactNode;
footer?: React.ReactNode;
}
const AppLayout: React.FC<AppLayoutProps> = ({ children, header, footer }) => {
const { auth } = usePage().props;
return (
<div className="min-h-screen bg-background text-foreground">
{header || <Header />}
<main>{children}</main>
{footer}
</div>
);
};
export default AppLayout;

184
resources/js/components/Layout/Header.tsx
View File

@@ -1,184 +0,0 @@
import React, { useCallback } from 'react';
import { usePage } from '@inertiajs/react';
import { Link, router } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
import { useAppearance } from '@/hooks/use-appearance';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
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 } = usePage().props as any;
const { t } = useTranslation('auth');
const { appearance, updateAppearance } = useAppearance();
const { localizedPath } = useLocalizedRoutes();
const toggleTheme = () => {
const newAppearance = appearance === 'dark' ? 'light' : 'dark';
updateAppearance(newAppearance);
};
const handleLanguageChange = useCallback(async (value: string) => {
console.log('handleLanguageChange called with:', value);
try {
const response = await fetch('/set-locale', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
},
body: JSON.stringify({ locale: value }),
});
console.log('fetch response:', response.status);
if (response.ok) {
console.log('calling i18n.changeLanguage with:', value);
i18n.changeLanguage(value);
// Reload only the locale prop to update the page props
router.reload({ only: ['locale'] });
}
} catch (error) {
console.error('Failed to change locale:', error);
}
}, []);
const handleLogout = () => {
router.post('/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="{localizedPath('/')}" className="text-2xl font-bold text-gray-800 dark:text-gray-200">
Fotospiel
</Link>
<nav className="flex space-x-8">
<Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
<Link href={localizedPath('/')}>
{t('header.home', 'Home')}
</Link>
</Button>
<Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
<Link href={localizedPath('/packages')}>
{t('header.packages', 'Pakete')}
</Link>
</Button>
<Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
<Link href={localizedPath('/blog')}>
{t('header.blog', 'Blog')}
</Link>
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
Anlässe
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem asChild>
<Link href={localizedPath('/anlaesse/hochzeit')} className="w-full flex items-center">
{t('header.occasions.wedding', 'Hochzeit')}
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href={localizedPath('/anlaesse/geburtstag')} className="w-full flex items-center">
{t('header.occasions.birthday', 'Geburtstag')}
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href={localizedPath('/anlaesse/firmenevent')} className="w-full flex items-center">
{t('header.occasions.corporate', 'Firmenevent')}
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
<Link href={localizedPath('/kontakt')}>
{t('header.contact', 'Kontakt')}
</Link>
</Button>
</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={i18n.language || 'de'} 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 || 'User'} />
<AvatarFallback>{(auth.user?.name || auth.user?.email || 'U').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 || auth.user?.email || 'User'}</p>
<p className="text-xs leading-none text-muted-foreground">{auth.user?.email || ''}</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href={localizedPath('/profile')}>
Profil
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href={localizedPath('/profile/orders')}>
Bestellungen
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleLogout}>
Abmelden
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
) : (
<>
<Link
href={localizedPath('/login')}
className="text-gray-700 hover:text-pink-600 dark:text-gray-300 dark:hover:text-pink-400 font-medium transition-colors duration-200"
>
{t('header.login')}
</Link>
<Link
href={localizedPath('/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;

25
resources/js/components/marketing/MarketingFooter.tsx
View File

@@ -1,25 +0,0 @@
import React from 'react';
import { Link } from '@inertiajs/react';
const MarketingFooter: React.FC = () => {
return (
<footer className="bg-gray-800 text-white py-8 px-4">
<div className="container mx-auto text-center">
<p>&copy; 2025 Fotospiel GmbH. Alle Rechte vorbehalten.</p>
<div className="mt-4 space-x-4">
<Link href="/impressum" className="hover:text-[#FFB6C1]">
Impressum
</Link>
<Link href="/datenschutz" className="hover:text-[#FFB6C1]">
Datenschutz
</Link>
<Link href="/kontakt" className="hover:text-[#FFB6C1]">
Kontakt
</Link>
</div>
</div>
</footer>
);
};
export default MarketingFooter;

83
resources/js/components/marketing/MarketingHeader.tsx
View File

@@ -1,83 +0,0 @@
import React, { useMemo, useState } from 'react';
import { Link } from '@inertiajs/react';
import { usePage } from '@inertiajs/react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
const MarketingHeader: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
usePage();
const { localizedPath } = useLocalizedRoutes();
const occasions = useMemo(
() => [
{ href: localizedPath('/anlaesse/hochzeit'), label: 'Hochzeiten' },
{ href: localizedPath('/anlaesse/geburtstag'), label: 'Geburtstage' },
{ href: localizedPath('/anlaesse/firmenevent'), label: 'Firmenevents' },
],
[localizedPath]
);
return (
<header className="bg-white shadow-md sticky top-0 z-50">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center space-x-2">
<Link href="/" className="text-2xl font-bold text-gray-900">
Die Fotospiel.App
</Link>
<svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<nav className="hidden md:flex space-x-6 items-center">
<Link href="/#how-it-works" className="text-gray-600 hover:text-gray-900">
So funktioniert es
</Link>
<Link href="/#features" className="text-gray-600 hover:text-gray-900">
Features
</Link>
<div className="relative">
<button
onClick={() => setIsOpen(!isOpen)}
className="text-gray-600 hover:text-gray-900"
>
Anlässe
</button>
{isOpen && (
<div className="absolute top-full left-0 mt-2 bg-white border rounded shadow-lg z-10">
{occasions.map((occasion) => (
<Link
key={occasion.href}
href={occasion.href}
className="block px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition"
onClick={() => setIsOpen(false)}
>
{occasion.label}
</Link>
))}
</div>
)}
</div>
<Link href="/blog" className="text-gray-600 hover:text-gray-900">
Blog
</Link>
<Link href="/packages" className="text-gray-600 hover:text-gray-900">
Packages
</Link>
<Link href="/kontakt" className="text-gray-600 hover:text-gray-900">
Kontakt
</Link>
<Link
href="/packages"
className="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold hover:bg-[#FF69B4] transition"
>
Packages entdecken
</Link>
</nav>
<button className="md:hidden text-gray-600">☰</button>
</div>
</header>
);
};
export default MarketingHeader;