112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Icon } from "@/components/ui/icon";
|
|
import { Link } from "@/i18n/routing";
|
|
import Image from "next/image";
|
|
import React, { useState } from "react";
|
|
|
|
const category = [
|
|
{
|
|
id: 1,
|
|
name: "Nasional",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Kaltara",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Keamanan",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Kesehatan",
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "Olahraga",
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "PPA",
|
|
},
|
|
{
|
|
id: 7,
|
|
name: "MediaHub",
|
|
},
|
|
];
|
|
|
|
const categoryLinks: any = {
|
|
Nasional: "https://tribratanews.kaltara.polri.go.id/category/nasional/",
|
|
Kaltara: "https://tribratanews.kaltara.polri.go.id/category/kaltara/",
|
|
Keamanan: "https://tribratanews.kaltara.polri.go.id/category/keamanan/",
|
|
Kesehatan: "https://tribratanews.kaltara.polri.go.id/category/kesehatan/",
|
|
Olahraga: "https://tribratanews.kaltara.polri.go.id/category/olahraga/",
|
|
PPA: "https://tribratanews.kaltara.polri.go.id/category/ppa/",
|
|
MediaHub: "https://new.netidhub.com/",
|
|
};
|
|
|
|
const NavbarKaltara = () => {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="bg-[#c03724] w-full py-3 px-4 lg:px-20 items-center fixed top-0 z-50">
|
|
<div className="flex flex-row justify-between items-center">
|
|
<Link href="/">
|
|
<Image width={2560} height={1440} src="/assets/img/logo-new-tbnews.png" alt="image" className="h-28 w-72" />
|
|
</Link>
|
|
<div className="flex flex-row">
|
|
<div className="text-white font-semibold hidden lg:flex flex-row gap-14 items-center">
|
|
{category?.map((data: any) => (
|
|
<Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
|
|
{data?.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<Link href="/auth">
|
|
<Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
|
|
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
|
|
<p className="text-[#c03724]">Login</p>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu Toggle */}
|
|
<button className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
|
|
{menuOpen ? (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
<path fill="currentColor" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" />
|
|
</svg>
|
|
) : (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
<path fill="currentColor" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
|
|
{/* Mobile Menu */}
|
|
{menuOpen && (
|
|
<div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 space-y-3 z-50 left-[142px] top-[142px] items-center w-[300px]">
|
|
<div className="text-white font-semibold gap-5 items-center grid grid-cols-2">
|
|
{category?.map((data: any) => (
|
|
<Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
|
|
{data?.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<Link href="/auth">
|
|
<Button className="flex justify-center items-center bg-white rounded-full gap-3 ml-0 p-2 w-full h-fit">
|
|
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
|
|
<p className="text-[#c03724]">Login</p>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NavbarKaltara;
|