Update: nueva version Horux Despachos

apps/web/components/layouts/header.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useThemeStore } from '@/stores/theme-store';
+import { themes, type ThemeName } from '@/themes';
+import { Button } from '@horux/shared-ui';
+import { TenantSelector } from '@/components/tenant-selector';
+import { MembershipSwitcher } from '@/components/membership-switcher';
+import { ContribuyenteSelector } from '@/components/contribuyente-selector';
+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', 'dark'];
+
+interface HeaderProps {
+  title: string;
+  children?: React.ReactNode;
+}
+
+export function Header({ title, children }: HeaderProps) {
+  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">
+      <div className="flex items-center gap-4 min-w-0">
+        <h1 className="text-xl font-semibold whitespace-nowrap">{title}</h1>
+        {children}
+      </div>
+
+      <div className="flex items-center gap-3">
+        <ContribuyenteSelector />
+        <MembershipSwitcher />
+        <TenantSelector />
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={cycleTheme}
+          title={`Tema: ${themes[theme].name}`}
+        >
+          {themeIcons[theme]}
+        </Button>
+      </div>
+    </header>
+  );
+}