feat(web): add dashboard layout with sidebar and header

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Consultoria AS
2026-01-22 02:25:35 +00:00
parent 9d49f8a833
commit 06e9f3eba7
4 changed files with 187 additions and 0 deletions

View File

@@ -0,0 +1,42 @@
'use client';
import { useThemeStore } from '@/stores/theme-store';
import { themes, type ThemeName } from '@/themes';
import { Button } from '@/components/ui/button';
import { Sun, Moon, Palette } from 'lucide-react';
const themeIcons: Record<ThemeName, React.ReactNode> = {
light: <Sun className="h-4 w-4" />,
vibrant: <Palette className="h-4 w-4" />,
corporate: <Palette className="h-4 w-4" />,
dark: <Moon className="h-4 w-4" />,
};
const themeOrder: ThemeName[] = ['light', 'vibrant', 'corporate', 'dark'];
export function Header({ title }: { title: string }) {
const { theme, setTheme } = useThemeStore();
const cycleTheme = () => {
const currentIndex = themeOrder.indexOf(theme);
const nextIndex = (currentIndex + 1) % themeOrder.length;
setTheme(themeOrder[nextIndex]);
};
return (
<header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-background/95 backdrop-blur px-6">
<h1 className="text-xl font-semibold">{title}</h1>
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="icon"
onClick={cycleTheme}
title={`Tema: ${themes[theme].name}`}
>
{themeIcons[theme]}
</Button>
</div>
</header>
);
}