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

fixed like action, better dark mode, bottom navigation working, added taskcollection

Browse Source
This commit is contained in:
SEB Fotografie - soeren
2025-09-13 00:43:53 +02:00
parent fc1e64fea3
commit 216ee063ff
24 changed files with 2070 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
resources/js/guest/components/Header.tsx
View File

@@ -3,13 +3,99 @@ import { Button } from '@/components/ui/button';
import { Link } from 'react-router-dom';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import AppearanceToggleDropdown from '@/components/appearance-dropdown';
import { Settings, ChevronDown } from 'lucide-react';
import { Settings, ChevronDown, User } from 'lucide-react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { useEventData } from '../hooks/useEventData';
import { usePollStats } from '../polling/usePollStats';
export default function Header({ slug, title = '' }: { slug?: string; title?: string }) {
if (!slug) {
return (
<div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
<div className="font-semibold">{title}</div>
<div className="flex items-center gap-2">
<AppearanceToggleDropdown />
<SettingsSheet />
</div>
</div>
);
}
const { event, loading: eventLoading, error: eventError } = useEventData();
const stats = usePollStats(slug);
if (eventLoading) {
return (
<div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
<div className="font-semibold">Lade Event...</div>
<div className="flex items-center gap-2">
<AppearanceToggleDropdown />
<SettingsSheet />
</div>
</div>
);
}
if (eventError || !event) {
return (
<div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
<div className="font-semibold text-red-600">Event nicht gefunden</div>
<div className="flex items-center gap-2">
<AppearanceToggleDropdown />
<SettingsSheet />
</div>
</div>
);
}
// Get event icon or generate initials
const getEventAvatar = (event: any) => {
if (event.type?.icon) {
return (
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-100 text-pink-600 text-xl">
{event.type.icon}
</div>
);
}
// Fallback to initials
const getInitials = (name: string) => {
const words = name.split(' ');
if (words.length >= 2) {
return `${words[0][0]}${words[1][0]}`.toUpperCase();
}
return name.substring(0, 2).toUpperCase();
};
return (
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-100 text-pink-600 font-semibold text-sm">
{getInitials(event.name)}
</div>
);
};
export default function Header({ title = '' }: { title?: string }) {
return (
<div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
<div className="font-semibold">{title}</div>
<div className="flex items-center gap-3">
{getEventAvatar(event)}
<div className="flex flex-col">
<div className="font-semibold text-base">{event.name}</div>
<div className="flex items-center gap-2 text-xs text-muted-foreground">
{stats && (
<>
<span className="flex items-center gap-1">
<User className="h-3 w-3" />
<span>{stats.onlineGuests} online</span>
</span>
<span>•</span>
<span className="flex items-center gap-1">
<span className="font-medium">{stats.tasksSolved}</span> Aufgaben gelöst
</span>
</>
)}
</div>
</div>
</div>
<div className="flex items-center gap-2">
<AppearanceToggleDropdown />
<SettingsSheet />