Spaces:
Sleeping
Sleeping
| 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> | |
| ); | |
| } | |