59 lines
3.7 KiB
TypeScript
59 lines
3.7 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
interface HeaderProps {
|
|
title: string;
|
|
isDarkMode: boolean;
|
|
onToggleDarkMode: () => void;
|
|
onToggleSidebar: () => void;
|
|
}
|
|
|
|
export const Header: React.FC<HeaderProps> = ({ title, isDarkMode, onToggleDarkMode, onToggleSidebar }) => {
|
|
return (
|
|
<header className="h-20 border-b border-slate-300 dark:border-slate-800 bg-white/95 dark:bg-slate-950/80 backdrop-blur-md flex items-center justify-between px-8 sticky top-0 z-10 shadow-soft">
|
|
<div className="flex items-center gap-6">
|
|
<button
|
|
onClick={onToggleSidebar}
|
|
className="p-3 hover:bg-slate-100 dark:hover:bg-slate-900 rounded-xl transition-colors text-slate-500 dark:text-slate-400 border border-transparent hover:border-slate-200"
|
|
title="Menü umschalten"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M4 6h16M4 12h16m-7 6h7" />
|
|
</svg>
|
|
</button>
|
|
<h1 className="text-2xl font-black text-slate-900 dark:text-white tracking-tight">{title}</h1>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<div className="relative hidden md:block">
|
|
<input
|
|
type="text"
|
|
placeholder="Suchen..."
|
|
className="pl-12 pr-6 py-2.5 bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-full w-80 text-sm font-medium focus:ring-4 focus:ring-brand-500/10 focus:border-brand-500 transition-all outline-none"
|
|
/>
|
|
<svg className="w-5 h-5 absolute left-4 top-2.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
|
|
</div>
|
|
|
|
<button
|
|
onClick={onToggleDarkMode}
|
|
className="p-2.5 rounded-full hover:bg-slate-100 dark:hover:bg-slate-900 transition-colors border border-transparent hover:border-slate-200"
|
|
title={isDarkMode ? 'Light Mode' : 'Dark Mode'}
|
|
>
|
|
{isDarkMode ? (
|
|
<svg className="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" /></svg>
|
|
) : (
|
|
<svg className="w-5 h-5 text-slate-500" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg>
|
|
)}
|
|
</button>
|
|
|
|
<div className="relative">
|
|
<div className="w-2.5 h-2.5 bg-red-500 rounded-full absolute right-1 top-1 ring-4 ring-white dark:ring-slate-950 animate-pulse"></div>
|
|
<button className="p-2.5 hover:bg-slate-100 dark:hover:bg-slate-900 rounded-xl border border-transparent hover:border-slate-200">
|
|
<svg className="w-6 h-6 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|