63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { NavLink } from 'react-router-dom';
|
|
import { cn } from '@/lib/utils';
|
|
import { ADMIN_EVENTS_PATH, ADMIN_SETTINGS_PATH } from '../constants';
|
|
|
|
const navItems = [
|
|
{ to: ADMIN_EVENTS_PATH, label: 'Events' },
|
|
{ to: ADMIN_SETTINGS_PATH, 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>
|
|
);
|
|
}
|
|
|