145 lines
7.3 KiB
XML
145 lines
7.3 KiB
XML
"use client";
|
|
import { Lock, Menu, Search } 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="flex flex-row items-center border-b-2 border-black mx-5">
|
|
<div className="relative w-full h-[113px]">
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<Image
|
|
src="/Warga.png"
|
|
alt="Kritik Tajam Logo"
|
|
width={100}
|
|
height={93}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<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="#">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
<Link href="#">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 256 209"
|
|
>
|
|
<path
|
|
fill="#55acee"
|
|
d="M256 25.45a105 105 0 0 1-30.166 8.27c10.845-6.5 19.172-16.793 23.093-29.057a105.2 105.2 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52c0 4.117.465 8.125 1.36 11.97c-43.65-2.191-82.35-23.1-108.255-54.876c-4.52 7.757-7.11 16.78-7.11 26.404c0 18.222 9.273 34.297 23.365 43.716a52.3 52.3 0 0 1-23.79-6.57q-.004.33-.003.661c0 25.447 18.104 46.675 42.13 51.5a52.6 52.6 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475c-17.975 14.086-40.622 22.483-65.228 22.483c-4.24 0-8.42-.249-12.529-.734c23.243 14.902 50.85 23.597 80.51 23.597c96.607 0 149.434-80.031 149.434-149.435q0-3.417-.152-6.795A106.8 106.8 0 0 0 256 25.45"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
<Link href="#">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 72 72"
|
|
>
|
|
<path
|
|
fill="#ea5a47"
|
|
d="M63.874 21.906a7.31 7.31 0 0 0-5.144-5.177C54.193 15.505 36 15.505 36 15.505s-18.193 0-22.73 1.224a7.31 7.31 0 0 0-5.144 5.177C6.91 26.472 6.91 36 6.91 36s0 9.528 1.216 14.095a7.31 7.31 0 0 0 5.144 5.177C17.807 56.495 36 56.495 36 56.495s18.193 0 22.73-1.223a7.31 7.31 0 0 0 5.144-5.177C65.09 45.528 65.09 36 65.09 36s0-9.528-1.216-14.094"
|
|
/>
|
|
<path fill="#fff" d="M30.05 44.65L45.256 36L30.05 27.35Z" />
|
|
<g
|
|
fill="none"
|
|
stroke="#000"
|
|
// stroke-miterlimit="10"
|
|
// stroke-width="2"
|
|
>
|
|
<path d="M63.874 21.906a7.31 7.31 0 0 0-5.144-5.177C54.193 15.505 36 15.505 36 15.505s-18.193 0-22.73 1.224a7.31 7.31 0 0 0-5.144 5.177C6.91 26.472 6.91 36 6.91 36s0 9.528 1.216 14.095a7.31 7.31 0 0 0 5.144 5.177C17.807 56.495 36 56.495 36 56.495s18.193 0 22.73-1.223a7.31 7.31 0 0 0 5.144-5.177C65.09 45.528 65.09 36 65.09 36s0-9.528-1.216-14.094" />
|
|
<path
|
|
// stroke-linecap="round"
|
|
// stroke-linejoin="round"
|
|
d="M30.05 44.65L45.256 36L30.05 27.35Z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</Link>
|
|
<Link href="#" className="text-red-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
<Link href="#" className="text-blue-800">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
// fill-rule="evenodd"
|
|
d="M17.802 12.298s1.617 1.597 2.017 2.336a.1.1 0 0 1 .018.035q.244.409.123.645c-.135.261-.592.392-.747.403h-2.858c-.199 0-.613-.052-1.117-.4c-.385-.269-.768-.712-1.139-1.145c-.554-.643-1.033-1.201-1.518-1.201a.6.6 0 0 0-.18.03c-.367.116-.833.639-.833 2.032c0 .436-.344.684-.585.684H9.674c-.446 0-2.768-.156-4.827-2.327C2.324 10.732.058 5.4.036 5.353c-.141-.345.155-.533.475-.533h2.886c.387 0 .513.234.601.444c.102.241.48 1.205 1.1 2.288c1.004 1.762 1.621 2.479 2.114 2.479a.53.53 0 0 0 .264-.07c.644-.354.524-2.654.494-3.128c0-.092-.001-1.027-.331-1.479c-.236-.324-.638-.45-.881-.496c.065-.094.203-.238.38-.323c.441-.22 1.238-.252 2.029-.252h.439c.858.012 1.08.067 1.392.146c.628.15.64.557.585 1.943c-.016.396-.033.842-.033 1.367c0 .112-.005.237-.005.364c-.019.711-.044 1.512.458 1.841a.4.4 0 0 0 .217.062c.174 0 .695 0 2.108-2.425c.62-1.071 1.1-2.334 1.133-2.429c.028-.053.112-.202.214-.262a.5.5 0 0 1 .236-.056h3.395c.37 0 .621.056.67.196c.082.227-.016.92-1.566 3.016c-.261.349-.49.651-.691.915c-1.405 1.844-1.405 1.937.083 3.337"
|
|
// clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className=" mx-auto flex items-center justify-between px-4 py-3">
|
|
{/* Kiri: Hamburger */}
|
|
<div className="flex items-center">
|
|
<Menu className="w-6 h-6 text-black cursor-pointer" />
|
|
</div>
|
|
|
|
{/* Tengah: Menu Utama */}
|
|
<nav className="hidden md:flex space-x-8 font-bold text-sm text-black">
|
|
<a href="/" className="relative">
|
|
<span className="border-b-2 border-black pb-1">BERANDA</span>
|
|
</a>
|
|
<a href="/category/citizen-news" className="hover:text-gray-700">
|
|
BERITA WARGA
|
|
</a>
|
|
<a href="/category/development" className="hover:text-gray-700">
|
|
PEMBANGUNAN
|
|
</a>
|
|
<a href="/category/health" className="hover:text-gray-700">
|
|
KESEHATAN
|
|
</a>
|
|
</nav>
|
|
|
|
{/* Kanan: Search Icon */}
|
|
<div className="flex items-center gap-3">
|
|
<Search className="w-5 h-5 text-black cursor-pointer" />
|
|
<Link href="/auth" className="font-medium hover:underline">
|
|
<Button>
|
|
{" "}
|
|
<Lock className="w-4 h-4" />
|
|
Login
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|