Spaces:
Sleeping
Sleeping
File size: 2,527 Bytes
ed439ff 8d0846a 1f6c75f ed439ff 8d0846a ed439ff 8d0846a ed439ff 1f6c75f ed439ff 1f6c75f | 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 53 54 55 56 57 58 59 60 61 62 63 64 65 | import { Link } from "react-router-dom";
import { Cpu, Database } from "lucide-react";
export default function Header() {
return (
<header className="bg-white border-b border-slate-200 sticky top-0 z-50">
<div className="max-w-6xl mx-auto px-4 py-4 md:py-5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3 md:gap-4">
{/* Logos Container */}
<div className="flex items-center gap-2 sm:gap-3">
<img
src="/unma.png"
alt="Logo UNMA"
className="h-8 sm:h-10 md:h-12 w-auto object-contain transition-all"
/>
<img
src="/fakultas.png"
alt="Logo Fakultas"
className="h-8 sm:h-10 md:h-12 w-auto object-contain transition-all"
/>
<img
src="/teknik.png"
alt="Logo Teknik"
className="h-8 sm:h-10 md:h-12 w-auto object-contain transition-all"
/>
<img
src="/informatika.png"
alt="Logo Informatika"
className="h-8 sm:h-10 md:h-12 w-auto object-contain transition-all"
/>
<img
src="/deepx.png"
alt="Logo DeepX"
className="h-6 sm:h-8 md:h-10 w-auto object-contain transition-all"
/>
</div>
{/* Divider and Title */}
<div className="border-l border-slate-200 pl-3 md:pl-4">
<h1 className="text-lg md:text-xl font-bold text-slate-900 leading-tight">
PlatDetect
</h1>
<p className="text-xs md:text-sm text-slate-500 leading-tight">
Sistem Deteksi dan Pengenalan Plat Nomor Kendaraan
</p>
</div>
</div>
<Link
to="/dashboard"
className="flex items-center gap-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 text-sm font-medium px-3 py-2 rounded-lg transition-colors"
>
<Database className="w-4 h-4" />
<span className="hidden sm:inline">Dashboard</span>
</Link>
</div>
<div className="mt-3 flex items-center gap-2 text-xs text-slate-400">
<Cpu className="w-3.5 h-3.5" />
<span>Menggunakan YOLO, OCR, FastAPI, dan React</span>
</div>
</div>
</header>
);
}
|