6100c998be
- Use real logo/isotype SVGs across app and emails - Token-based color system aligned with landing (brand scale + semantic tokens) - ThemeProvider (light/dark/system) with header toggle and settings card - Embed logo in transactional emails; centralize email colors
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { Moon, Sun } from 'lucide-react'
|
|
import { useTheme } from '../../context/ThemeProvider'
|
|
import { Logo } from '../brand'
|
|
import { Breadcrumb } from './Breadcrumb'
|
|
import { UserMenu } from './UserMenu'
|
|
|
|
function ThemeToggle() {
|
|
const { isDark, setTheme } = useTheme()
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => setTheme(isDark ? 'light' : 'dark')}
|
|
aria-label={isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro'}
|
|
className="flex size-9 items-center justify-center rounded-full border border-border text-foreground/70 transition-colors hover:bg-primary-soft hover:text-primary"
|
|
>
|
|
{isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export function Header() {
|
|
return (
|
|
<header className="sticky top-0 z-40 h-16 w-full border-b border-border bg-background/90 backdrop-blur">
|
|
<div className="mx-auto flex h-full w-full max-w-7xl items-center justify-between px-4 lg:px-6">
|
|
<div className="flex min-w-0 items-center">
|
|
<a href="/" className="flex items-center lg:hidden" aria-label="Gruperly inicio">
|
|
<Logo className="h-8" />
|
|
</a>
|
|
<Breadcrumb />
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<ThemeToggle />
|
|
<UserMenu />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
} |