88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
"use client";
|
|
import { Facebook, Instagram, Search, Twitter, Youtube } from "lucide-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Button } from "../ui/button";
|
|
|
|
export default function Navbar() {
|
|
return (
|
|
<div className="w-full bg-white">
|
|
<div className="relative w-full h-[113px]">
|
|
<Image
|
|
src="/bg-isu.jpg"
|
|
alt="Kritik Tajam Background"
|
|
width={1920}
|
|
height={113}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<Image
|
|
src="/isukini.jpg"
|
|
alt="Kritik Tajam Logo"
|
|
width={100}
|
|
height={93}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex max-w-screen-xl mx-auto items-center justify-between py-2 flex-wrap gap-y-2">
|
|
<div className="flex flex-wrap gap-x-4 md:gap-x-6 font-semibold text-sm mx-3 md:mx-3 lg:mx-3 xl:mx-0">
|
|
<Link
|
|
href="/"
|
|
className="text-[#795548] border-t-3 border-[#795548] pb-1"
|
|
>
|
|
HOME
|
|
</Link>
|
|
<Link
|
|
href="/category/latest-news"
|
|
className="text-black hover:text-[#795548]"
|
|
>
|
|
BERITA TERKINI
|
|
</Link>
|
|
<Link
|
|
href="/berita-populer"
|
|
className="text-black hover:text-[#795548]"
|
|
>
|
|
BERITA POPULER
|
|
</Link>
|
|
<Link href="/jaga-negeri" className="text-black hover:text-[#795548]">
|
|
JAGA NEGERI
|
|
</Link>
|
|
<Link
|
|
href="/berita-opini"
|
|
className="text-black hover:text-[#795548]"
|
|
>
|
|
BERITA OPINI
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Ikon kanan */}
|
|
<div className="flex items-center space-x-4 text-black mt-2 md:mt-0 mr-3 md:mr-3 lg:mr-3 xl:mr-0">
|
|
<Link href="#">
|
|
<Facebook size={18} />
|
|
</Link>
|
|
<Link href="#">
|
|
<Twitter size={18} />
|
|
</Link>
|
|
<Link href="#">
|
|
<Instagram size={18} />
|
|
</Link>
|
|
<Link href="#">
|
|
<Youtube size={18} />
|
|
</Link>
|
|
<Link href="#">
|
|
<Search size={18} />
|
|
</Link>
|
|
|
|
<Link href={"/auth"}>
|
|
<Button className="bg-black text-white rounded-md px-5 py-2 hover:bg-yellow-500">
|
|
Login
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|