File size: 2,322 Bytes
60b2d8c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import React, { useState } from 'react';
import { Bell, Search, Settings } from 'lucide-react';
const Header = () => {
const [notifications] = useState(3);
return (
<header className="flex justify-between items-center p-4 border-b dark:border-factory-blue-light">
<div>
<h1 className="text-xl font-bold text-gray-900 dark:text-white">Digital Factory Genesis</h1>
<p className="text-sm text-gray-500 dark:text-gray-400">Manufacturing Execution System Dashboard</p>
</div>
<div className="flex items-center space-x-4">
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Search className="h-4 w-4 text-gray-400" />
</div>
<input
type="text"
placeholder="Search..."
className="pl-10 pr-4 py-2 text-sm border rounded-lg dark:border-factory-blue-light bg-transparent focus:outline-none focus:ring-2 focus:ring-factory-teal focus:border-transparent transition-colors"
/>
</div>
<button className="relative p-2 rounded-full hover:bg-gray-100 dark:hover:bg-factory-blue-light transition-colors">
<Bell className="h-5 w-5 text-gray-600 dark:text-gray-300" />
{notifications > 0 && (
<span className="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-factory-danger text-[10px] font-medium text-white">
{notifications}
</span>
)}
</button>
<button className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-factory-blue-light transition-colors">
<Settings className="h-5 w-5 text-gray-600 dark:text-gray-300" />
</button>
<button className="flex items-center space-x-2 ml-2 bg-transparent hover:bg-gray-100 dark:hover:bg-factory-blue-light px-3 py-2 rounded-lg transition-colors">
<div className="h-8 w-8 rounded-full bg-factory-blue flex items-center justify-center text-white">
<span className="font-medium">JD</span>
</div>
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</span>
</button>
</div>
</header>
);
};
export default Header;
|