188 lines
8.7 KiB
React
188 lines
8.7 KiB
React
import React, { useState } from 'react';
|
||
import { useApp } from '../context/AppContext';
|
||
import { Bot, Search, SlidersHorizontal, Gift, Bell, User, ChevronDown, CheckCircle, LogOut, Globe, Sparkles } from 'lucide-react';
|
||
|
||
export const Header = () => {
|
||
const {
|
||
searchQuery,
|
||
setSearchQuery,
|
||
setIsDetailedSearchOpen,
|
||
setIsCompanyScannerOpen,
|
||
setIsAiSpecAnalyzerOpen,
|
||
userProfile,
|
||
notifications,
|
||
setActiveTab,
|
||
clearAllFilters
|
||
} = useApp();
|
||
|
||
const [showNotifications, setShowNotifications] = useState(false);
|
||
const [showUserMenu, setShowUserMenu] = useState(false);
|
||
|
||
const handleSearchSubmit = (e) => {
|
||
e.preventDefault();
|
||
setActiveTab('list');
|
||
};
|
||
|
||
return (
|
||
<header className="bg-[#1f2937] text-white border-b border-slate-700 sticky top-0 z-40 shadow-sm">
|
||
<div className="max-w-[1600px] mx-auto px-4 h-16 flex items-center justify-between gap-4">
|
||
|
||
{/* Logo */}
|
||
<div
|
||
onClick={() => { setActiveTab('list'); clearAllFilters(); }}
|
||
className="flex items-center gap-2.5 cursor-pointer select-none group"
|
||
>
|
||
<div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center shadow-md group-hover:bg-blue-500 transition-colors">
|
||
<Bot className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div className="flex flex-col">
|
||
<span className="font-black text-2xl tracking-tight text-white flex items-center gap-1">
|
||
İhale<span className="text-blue-400 font-extrabold">ist</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Search Bar */}
|
||
<form onSubmit={handleSearchSubmit} className="flex-1 max-w-2xl flex items-center gap-2">
|
||
<div className="relative flex-1">
|
||
<input
|
||
type="text"
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
placeholder="İhale, kurum veya İKN no ile arayın..."
|
||
className="w-full bg-[#374151] text-white placeholder-slate-400 pl-4 pr-10 py-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 border border-slate-600 transition-all"
|
||
/>
|
||
{searchQuery && (
|
||
<button
|
||
type="button"
|
||
onClick={() => setSearchQuery('')}
|
||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white text-xs"
|
||
>
|
||
✕
|
||
</button>
|
||
)}
|
||
</div>
|
||
<button
|
||
type="submit"
|
||
className="bg-slate-700 hover:bg-slate-600 text-white font-medium px-4 py-2 rounded-lg text-sm flex items-center gap-1.5 transition-colors border border-slate-600 shrink-0"
|
||
>
|
||
<Search className="w-4 h-4" />
|
||
<span className="font-semibold text-xs tracking-wider">ARA</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setIsDetailedSearchOpen(true)}
|
||
title="Detaylı İhale Arama"
|
||
className="bg-blue-600 hover:bg-blue-500 text-white p-2 rounded-lg text-sm flex items-center justify-center transition-colors shadow-sm shrink-0"
|
||
>
|
||
<SlidersHorizontal className="w-4 h-4" />
|
||
</button>
|
||
</form>
|
||
|
||
{/* Right Action Icons */}
|
||
<div className="flex items-center gap-3">
|
||
|
||
{/* Gemini 3.6 Flash PDF Spec Analyzer Button */}
|
||
<button
|
||
onClick={() => setIsAiSpecAnalyzerOpen(true)}
|
||
className="bg-purple-600 hover:bg-purple-500 text-white font-extrabold px-3 py-1.5 rounded-lg text-xs flex items-center gap-1.5 shadow-xs transition-colors shrink-0"
|
||
title="Teknik Şartname PDF'ini Gemini 3.6 Flash İle Analiz Edin"
|
||
>
|
||
<Sparkles className="w-4 h-4 text-amber-300" />
|
||
<span className="hidden md:inline">Gemini 3.6 PDF Analizi</span>
|
||
</button>
|
||
|
||
{/* Company Web Scanner Button */}
|
||
<button
|
||
onClick={() => setIsCompanyScannerOpen(true)}
|
||
className="bg-blue-600 hover:bg-blue-500 text-white font-bold px-3 py-1.5 rounded-lg text-xs flex items-center gap-1.5 shadow-xs transition-colors shrink-0"
|
||
title="Web Sitenizi Tarayın & AI İhale Profiline İşleyin"
|
||
>
|
||
<Globe className="w-4 h-4 text-blue-200" />
|
||
<span className="hidden sm:inline">Web Siteni Tara (AI)</span>
|
||
</button>
|
||
|
||
{/* Trial Badge */}
|
||
<div className="bg-amber-400 text-slate-900 font-bold px-3 py-1.5 rounded-lg text-xs flex items-center gap-1.5 shadow-sm">
|
||
<Gift className="w-4 h-4 text-slate-900" />
|
||
<span>{userProfile.trialDaysLeft} gün</span>
|
||
</div>
|
||
|
||
{/* Notifications Dropdown */}
|
||
<div className="relative">
|
||
<button
|
||
onClick={() => setShowNotifications(!showNotifications)}
|
||
className="relative p-2 text-slate-300 hover:text-white hover:bg-slate-700 rounded-lg transition-colors"
|
||
>
|
||
<Bell className="w-5 h-5" />
|
||
{notifications.some(n => !n.read) && (
|
||
<span className="absolute top-1 right-1 w-2.5 h-2.5 bg-blue-500 rounded-full ring-2 ring-[#1f2937]" />
|
||
)}
|
||
</button>
|
||
|
||
{showNotifications && (
|
||
<div className="absolute right-0 mt-2 w-80 bg-white text-slate-800 rounded-xl shadow-xl border border-slate-200 py-2 z-50 animate-fade-in">
|
||
<div className="px-4 py-2 border-b border-slate-100 flex items-center justify-between">
|
||
<h4 className="font-bold text-sm">Bildirimler</h4>
|
||
<span className="text-xs text-blue-600 cursor-pointer hover:underline">Tümünü Okundu İşaretle</span>
|
||
</div>
|
||
<div className="max-h-64 overflow-y-auto divide-y divide-slate-100">
|
||
{notifications.map(n => (
|
||
<div key={n.id} className="p-3 hover:bg-slate-50 transition-colors cursor-pointer text-xs">
|
||
<div className="font-semibold text-slate-900 flex justify-between">
|
||
<span>{n.title}</span>
|
||
<span className="text-slate-400 font-normal text-[10px]">{n.time}</span>
|
||
</div>
|
||
<p className="text-slate-600 mt-1 leading-relaxed">{n.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* User Profile */}
|
||
<div className="relative">
|
||
<button
|
||
onClick={() => setShowUserMenu(!showUserMenu)}
|
||
className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-2 transition-colors border border-slate-600"
|
||
>
|
||
<div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-xs">
|
||
{userProfile.username.charAt(0).toUpperCase()}
|
||
</div>
|
||
<span>{userProfile.username}</span>
|
||
<ChevronDown className="w-3.5 h-3.5 text-slate-400" />
|
||
</button>
|
||
|
||
{showUserMenu && (
|
||
<div className="absolute right-0 mt-2 w-60 bg-white text-slate-800 rounded-xl shadow-xl border border-slate-200 py-2 z-50 animate-fade-in">
|
||
<div className="px-4 py-2 border-b border-slate-100">
|
||
<p className="font-bold text-sm text-slate-900">{userProfile.name}</p>
|
||
<p className="text-xs text-slate-500 truncate">{userProfile.company}</p>
|
||
</div>
|
||
<div className="py-1 text-xs">
|
||
<a href="#profile" className="px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700">
|
||
<User className="w-4 h-4 text-slate-400" /> Firma Bilgileri & Üyeler
|
||
</a>
|
||
<a href="#trial" className="px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700">
|
||
<Gift className="w-4 h-4 text-amber-500" /> Abonelik Planları (7 Gün Kalan)
|
||
</a>
|
||
<a href="#settings" className="px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700">
|
||
<CheckCircle className="w-4 h-4 text-slate-400" /> Bildirim Tercihleri
|
||
</a>
|
||
</div>
|
||
<div className="border-t border-slate-100 pt-1 text-xs">
|
||
<button className="w-full text-left px-4 py-2 text-red-600 hover:bg-red-50 flex items-center gap-2">
|
||
<LogOut className="w-4 h-4" /> Çıkış Yap
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
};
|