feat(tenant-admin): refresh event management experience

resources/js/admin/components/AdminLayout.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+
+const navItems = [
+  { to: '/admin/events', label: 'Events' },
+  { to: '/admin/settings', label: 'Einstellungen' },
+];
+
+interface AdminLayoutProps {
+  title: string;
+  subtitle?: string;
+  actions?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutProps) {
+  React.useEffect(() => {
+    document.body.classList.add('tenant-admin-theme');
+    return () => {
+      document.body.classList.remove('tenant-admin-theme');
+    };
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-pink-100 via-amber-50 to-sky-100 text-slate-900">
+      <header className="border-b border-white/60 bg-white/80 shadow-sm backdrop-blur-md">
+        <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-6 py-6 md:flex-row md:items-center md:justify-between">
+          <div>
+            <p className="text-xs uppercase tracking-[0.35em] text-pink-600">Fotospiel Tenant Admin</p>
+            <h1 className="text-3xl font-semibold text-slate-900">{title}</h1>
+            {subtitle && <p className="mt-1 text-sm text-slate-600">{subtitle}</p>}
+          </div>
+          {actions && <div className="flex flex-wrap gap-2">{actions}</div>}
+        </div>
+        <nav className="mx-auto flex w-full max-w-6xl gap-3 px-6 pb-4 text-sm font-medium">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) =>
+                cn(
+                  'rounded-full px-4 py-2 transition-colors',
+                  isActive
+                    ? 'bg-pink-500 text-white shadow-md shadow-pink-500/30'
+                    : 'bg-white/70 text-slate-600 hover:bg-white hover:text-slate-900'
+                )
+              }
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+      </header>
+      <main className="mx-auto w-full max-w-6xl px-6 py-10">
+        <div className="grid gap-6">{children}</div>
+      </main>
+    </div>
+  );
+}