Initial commit

components/Header.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Plus, Network, Scan } from 'lucide-react';
+
+interface HeaderProps {
+  onAddService: () => void;
+  onScanNetwork: () => void;
+}
+
+const Header: React.FC<HeaderProps> = ({ onAddService, onScanNetwork }) => {
+  return (
+    <header className="bg-gray-800/50 backdrop-blur-sm sticky top-0 z-10 shadow-md">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-20">
+          <div className="flex items-center">
+            <Network className="h-8 w-8 text-teal-400" />
+            <h1 className="ml-3 text-2xl font-bold text-gray-100 tracking-tight">
+              Local Dashboard
+            </h1>
+          </div>
+          <div className="flex items-center space-x-3">
+            <button
+              onClick={onScanNetwork}
+              type="button"
+              className="inline-flex items-center px-4 py-2 border border-gray-600 text-sm font-medium rounded-md shadow-sm text-gray-200 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-teal-500 transition-colors"
+            >
+              <Scan className="-ml-1 mr-2 h-5 w-5" />
+              Scan Network
+            </button>
+            <button
+              onClick={onAddService}
+              type="button"
+              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-teal-500 hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-teal-500 transition-colors"
+            >
+              <Plus className="-ml-1 mr-2 h-5 w-5" />
+              Add Service
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;