Deploy Inicial do SteelCheck com Docker Build Automatizado

components/Header.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { LogoBase64, SunIcon, MoonIcon, RefreshIcon, SignOutIcon } from './Icons';
+import { useTheme } from '../context/ThemeContext';
+
+interface HeaderProps {
+  onReset: () => void;
+  onClearKey: () => void;
+  hasKey: boolean;
+}
+
+export const Header: React.FC<HeaderProps> = ({ onReset, onClearKey, hasKey }) => {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <header className="sticky top-0 z-30 transition-all duration-300 backdrop-blur-md bg-white/70 dark:bg-slate-900/70 border-b border-white/20 dark:border-slate-800 shadow-sm">
+      <div className="container mx-auto px-4 py-3 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="relative group cursor-pointer">
+            <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
+            <img src={LogoBase64} alt="SteelBase Logo" className="relative w-10 h-10 object-contain" />
+          </div>
+
+          <div className="hidden sm:block">
+            <h1 className="text-2xl font-display font-bold bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300">
+              SteelBase
+            </h1>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 sm:gap-4">
+          {hasKey && (
+            <button
+              onClick={onClearKey}
+              className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium text-slate-500 hover:text-red-500 hover:bg-red-50 dark:text-slate-400 dark:hover:bg-red-900/20 transition-all border border-transparent hover:border-red-200 dark:hover:border-red-900"
+              title="Alterar Chave de API"
+            >
+              <SignOutIcon className="w-4 h-4" />
+              <span>Sair</span>
+            </button>
+          )}
+
+          <div className="flex items-center gap-1 bg-slate-100 dark:bg-slate-800/50 p-1 rounded-full border border-slate-200 dark:border-slate-700">
+            <button
+              onClick={onReset}
+              className="p-2 rounded-full text-slate-500 dark:text-slate-400 hover:bg-white dark:hover:bg-slate-700 hover:shadow-sm focus:outline-none transition-all"
+              aria-label="Carregar outro arquivo"
+              title="Novo Relatório"
+            >
+              <RefreshIcon className="w-5 h-5" />
+            </button>
+
+            <div className="w-px h-4 bg-slate-300 dark:bg-slate-700 mx-1"></div>
+
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-full text-slate-500 dark:text-slate-400 hover:bg-white dark:hover:bg-slate-700 hover:shadow-sm focus:outline-none transition-all relative overflow-hidden"
+              aria-label="Toggle theme"
+            >
+              <div className="relative z-10">
+                {theme === 'light' ? (
+                  <MoonIcon className="w-5 h-5" />
+                ) : (
+                  <SunIcon className="w-5 h-5" />
+                )}
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};