56 lines
2.6 KiB
TypeScript
Executable File
56 lines
2.6 KiB
TypeScript
Executable File
/**
|
|
* Header.tsx
|
|
*
|
|
* @author Descomplicar® Crescimento Digital
|
|
* @link https://descomplicar.pt
|
|
* @copyright 2025 Descomplicar®
|
|
*/
|
|
|
|
|
|
import React from 'react';
|
|
import { MailIcon } from './icons/MailIcon';
|
|
|
|
interface HeaderProps {
|
|
theme: string;
|
|
toggleTheme: () => void;
|
|
}
|
|
|
|
const Header: React.FC<HeaderProps> = ({ theme, toggleTheme }) => {
|
|
return (
|
|
<header className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-sm p-4 flex justify-between items-center border-b border-slate-200 dark:border-slate-700 sticky top-0 z-10">
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-sky-500 p-2 rounded-lg">
|
|
<MailIcon className="w-6 h-6 text-white" />
|
|
</div>
|
|
<h1 className="text-xl font-bold text-slate-800 dark:text-white">Limpador de E-mail com IA</h1>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
|
|
aria-label={theme === 'dark' ? 'Ativar modo claro' : 'Ativar modo escuro'}
|
|
>
|
|
{theme === 'dark' ? (
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
) : (
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
|
|
<button className="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-slate-500 dark:text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
|
|
<img src="https://i.pravatar.cc/40?img=3" alt="Avatar do usuário" className="w-10 h-10 rounded-full" />
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|