martin/Kunst_Gegen_Bares_Kimaschine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new desigh test2 #deploy

Browse Source
This commit is contained in:
martin 2026-01-20 17:11:31 +01:00
parent 9067a4c6c0
commit 462975a4c5
1 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/features/event/components/EventFormInline.tsx
View File

@ -522,6 +522,32 @@ const EventFormInline: React.FC<EventFormInlineProps> = ({ onSuccess, onCancel,
);
};
const MobileTabButton = ({
tab,
label,
Icon,
}: {
tab: 'stammdaten' | 'promotion' | 'artists';
label: string;
Icon: React.ComponentType<{ className?: string }>;
}) => {
const isActive = activeTab === tab;
return (
<Button
type="button"
variant="ghost"
size="sm"
className={`flex-1 h-10 justify-center gap-2 rounded-xl transition-colors ${
isActive ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-primary/5 hover:text-foreground'
}`}
onClick={() => setActiveTab(tab)}
>
<Icon className="h-4 w-4" />
<span className="text-sm">{label}</span>
</Button>
);
};
return (
<div className="rounded-lg border p-4">
<form onSubmit={handleSubmit} className="relative">
@ -537,20 +563,32 @@ const EventFormInline: React.FC<EventFormInlineProps> = ({ onSuccess, onCancel,
{error && <div className="text-sm text-destructive pt-1">{error}</div>}
</div>
<div className="flex gap-4 pt-4">
<aside className={`sticky top-20 self-start shrink-0 ${sidebarWidthClass} transition-[width] duration-200`}>
<div className="rounded-2xl border bg-background p-2 shadow-sm">
{navExpanded && <div className="text-xs text-muted-foreground px-2 pb-2">Menü</div>}
<div className="space-y-1">
<NavItemButton tab="stammdaten" label="Stammdaten" Icon={CalendarDays} />
<NavItemButton tab="promotion" label="Promotion" Icon={Megaphone} />
<NavItemButton tab="artists" label="Künstler" Icon={Users} />
</div>
{isMobile && (
<div className="sticky top-[52px] z-20 -mx-4 px-4 py-2 border-b bg-background">
<div className="flex gap-2">
<MobileTabButton tab="stammdaten" label="Event" Icon={CalendarDays} />
<MobileTabButton tab="promotion" label="Promotion" Icon={Megaphone} />
<MobileTabButton tab="artists" label="Künstler" Icon={Users} />
</div>
</aside>
</div>
)}
<div className="flex-1 min-w-0">
<div className={isMobile ? 'pt-4' : 'flex gap-4 pt-4'}>
{!isMobile && (
<aside className={`sticky top-20 self-start shrink-0 ${sidebarWidthClass} transition-[width] duration-200`}>
<div className="rounded-2xl border bg-background p-2 shadow-sm">
{navExpanded && <div className="text-xs text-muted-foreground px-2 pb-2">Menü</div>}
<div className="space-y-1">
<NavItemButton tab="stammdaten" label="Stammdaten" Icon={CalendarDays} />
<NavItemButton tab="promotion" label="Promotion" Icon={Megaphone} />
<NavItemButton tab="artists" label="Künstler" Icon={Users} />
</div>
</div>
</aside>
)}
<div className={isMobile ? '' : 'flex-1 min-w-0'}>
{activeTab === 'stammdaten' && (
<EventStammdatenSection
form={form}