44 lines
1.8 KiB
TypeScript
44 lines
1.8 KiB
TypeScript
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; |