1429 lines
54 KiB
TypeScript
1429 lines
54 KiB
TypeScript
"use client";
|
|
import { siteConfig } from "@/config/site";
|
|
import { Input } from "@heroui/input";
|
|
import {
|
|
Navbar,
|
|
NavbarContent,
|
|
NavbarItem,
|
|
NavbarMenu,
|
|
NavbarMenuItem,
|
|
NavbarMenuToggle,
|
|
} from "@heroui/navbar";
|
|
import {
|
|
Button,
|
|
Dropdown,
|
|
DropdownItem,
|
|
DropdownMenu,
|
|
DropdownTrigger,
|
|
} from "@heroui/react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import {
|
|
ChevronDownIcon,
|
|
ChevronRightIcon,
|
|
ChevronUpIcon,
|
|
FbIcon,
|
|
FbIconNav,
|
|
IdnIcon,
|
|
IgIcon,
|
|
SearchIcon,
|
|
TtIcon,
|
|
TwIcon,
|
|
UKIcon,
|
|
YtIcon,
|
|
} from "../../icons";
|
|
import { ThemeSwitch } from "../../theme-switch";
|
|
import Cookies from "js-cookie";
|
|
import { useRouter } from "next/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
import storedLanguage from "@/store/language-store";
|
|
|
|
interface MenuItem {
|
|
key: string;
|
|
label: string;
|
|
href: URL;
|
|
submenu?: SubMenuItem[];
|
|
}
|
|
|
|
interface SubMenuItem {
|
|
label: string;
|
|
href: string;
|
|
}
|
|
|
|
interface DropdownOpenState {
|
|
[key: string]: boolean;
|
|
}
|
|
|
|
export default function NavbarHumas(props: { size: string }) {
|
|
const { size } = props;
|
|
const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const router = useRouter();
|
|
const t = useTranslations("Navbar");
|
|
const token = Cookies.get("access_token");
|
|
const isAuthenticated = Cookies.get("is_authenticated");
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
|
|
const language = storedLanguage((state) => state.locale);
|
|
const setLanguage = storedLanguage((state) => state.setLocale);
|
|
|
|
// useEffect(() => {
|
|
// if (!isAuthenticated) {
|
|
// onLogout();
|
|
// }
|
|
// }, [token]);
|
|
|
|
const onLogout = () => {
|
|
Object.keys(Cookies.get()).forEach((cookieName) => {
|
|
Cookies.remove(cookieName, { path: "/" });
|
|
});
|
|
router.push("/auth");
|
|
};
|
|
|
|
const toggleDropdown = (key: any) => {
|
|
setDropdownOpen({
|
|
...dropdownOpen,
|
|
[key]: !dropdownOpen[key],
|
|
});
|
|
};
|
|
|
|
const searchInput = (
|
|
<Input
|
|
aria-label="search"
|
|
className="w-full"
|
|
classNames={{
|
|
inputWrapper: "bg-default-100",
|
|
input: "text-sm",
|
|
}}
|
|
labelPlacement="outside"
|
|
placeholder={t("search")}
|
|
startContent={
|
|
<SearchIcon className="text-base text-default-400 pointer-events-none" />
|
|
}
|
|
type="search"
|
|
/>
|
|
);
|
|
|
|
// useEffect(() => {
|
|
// const handleScroll = () => {
|
|
// setIsScrolled(window.scrollY > 0);
|
|
// };
|
|
|
|
// window.addEventListener("scroll", handleScroll);
|
|
|
|
// return () => {
|
|
// window.removeEventListener("scroll", handleScroll);
|
|
// };
|
|
// }, []);
|
|
|
|
useEffect(() => {
|
|
const mainElement = document.querySelector("main");
|
|
|
|
const handleScroll = () => {
|
|
if (mainElement) {
|
|
setIsScrolled(mainElement.scrollTop > 0);
|
|
}
|
|
};
|
|
|
|
mainElement?.addEventListener("scroll", handleScroll);
|
|
|
|
return () => {
|
|
mainElement?.removeEventListener("scroll", handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<Navbar
|
|
isBordered
|
|
maxWidth="full"
|
|
height={size === "sm" ? "6rem" : "8rem"}
|
|
className={`transition-all duration-300 ease-in-out backdrop-opacity-10 ${
|
|
size === "sm"
|
|
? "lg:hidden !bg-slate-50 dark:!bg-black "
|
|
: "hidden lg:block"
|
|
} ${isScrolled ? "bg-white dark:bg-[#1F1A17] " : "bg-opacity-50"}`}
|
|
classNames={{ wrapper: "px-0" }}
|
|
>
|
|
<div className="w-full h-full flex">
|
|
<div className="w-full hidden lg:flex flex-row">
|
|
<div
|
|
className={`flex flex-wrap items-center justify-between px-[50px] w-full ${
|
|
isOpen ? "bg-white dark:bg-[#1F1A17]" : "bg-transparent"
|
|
}`}
|
|
>
|
|
<Link href={"/"}>
|
|
<Image
|
|
width={720}
|
|
height={720}
|
|
src="/logohumas.png"
|
|
alt="logo"
|
|
className="w-[95px]"
|
|
/>
|
|
</Link>
|
|
<Dropdown
|
|
className="bg-white dark:bg-[#1F1A17] "
|
|
radius="none"
|
|
classNames={{ base: "shadow-none" }}
|
|
onOpenChange={(state) => setIsOpen(state)}
|
|
>
|
|
<NavbarItem>
|
|
<DropdownTrigger>
|
|
<Button
|
|
disableRipple
|
|
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
|
|
radius="sm"
|
|
variant="light"
|
|
endContent={<ChevronDownIcon className="pt-1" />}
|
|
>
|
|
{t("pelayananMasyarakat")}
|
|
</Button>
|
|
</DropdownTrigger>
|
|
</NavbarItem>
|
|
<DropdownMenu
|
|
aria-label="pelayanan-masyarakat"
|
|
title="pelayanan-masyarakat"
|
|
className="pt-4"
|
|
classNames={{
|
|
list: "gap-2 flex flex-row flex-wrap",
|
|
}}
|
|
itemClasses={{
|
|
base: "w-[450px]",
|
|
}}
|
|
>
|
|
<DropdownItem
|
|
key="SP2HP"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://sp2hp.bareskrim.polri.go.id/",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/at4.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">SP2HP</p>
|
|
<p className="text-[12px] font-light overflow-hidden">
|
|
Pelayanan Surat Pemberitahuan Perkembangan Hasil
|
|
Penyidikan Online
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem key="Formulir Permohonan Informasi">
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm2.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">
|
|
Formulir Permohonan Informasi
|
|
</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Pelayanan Permohonan Formulir Informasi
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key={"SIM"}
|
|
onPress={() =>
|
|
window.open(
|
|
"https://www.digitalkorlantas.id/sim/",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm3.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">Pelayanan SIM</p>
|
|
<p className="text-[12px] font-light overflow-hidden">
|
|
Pelayanan Untuk Pendaftaran SIM dan Perpanjangan SIM
|
|
Berbasis Online
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key={"erikkes"}
|
|
onPress={() => window.open("https://erikkes.id/", "_blank")}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm4.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">
|
|
Pelayanan e-Rikkes SIM
|
|
</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Pelayanan Pemeriksaan Kesehatan Berbasis Teknologi
|
|
Berbasis Online Dalam Proses Penerbitan SIM
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key={"eppsi"}
|
|
onPress={() => window.open("https://eppsi.id/", "_blank")}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm5.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">
|
|
Pelayanan Test Psikologi SIM
|
|
</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Pelayanan Pembuatan Test Psikologi SIM Berbasis Online
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key={"eavis"}
|
|
onPress={() =>
|
|
window.open(
|
|
"https://e-avis.korlantas.polri.go.id/",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm6.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">Pelayanan e-Avis</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Pelayanan Ujian Teori SIM Berbasis Online{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key={"samsat"}
|
|
onPress={() =>
|
|
window.open("https://samsatdigital.id/", "_blank")
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm7.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">
|
|
Pelayanan Samsat Digital
|
|
</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Pelayanan Samsat Berbasis Online
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key={"skck"}
|
|
onPress={() =>
|
|
window.open("https://skck.polri.go.id/", "_blank")
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm8.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">Pelayanan SKCK</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Pelayanan Pembuatan SKCK Berbasis Online{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key={"propam"}
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam&pli=1",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm9.png"
|
|
className="w-[50px] h-[50px] "
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">
|
|
Pelayanan Propam Presisi
|
|
</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Pelayanan Untuk Masyarakat Agar Mudah Melaporkan Sesuatu
|
|
Kejadian atau Kejahatan{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key={"dumas"}
|
|
onPress={() =>
|
|
window.open("https://dumaspresisi.polri.go.id/", "_blank")
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm10.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">
|
|
Pelayanan Dumas Presisi{" "}
|
|
</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Layanan Pengaduan Masyarakat Terintegrasi Berbasis
|
|
Online
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key={"binmas"}
|
|
onPress={() =>
|
|
window.open("https://bos.polri.go.id/login", "_blank")
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm11.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">Pelayanan Binmas </p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Pelayanan Berbasis Website Sistem Informasi Satpam
|
|
Online, BUJP, Pelaporan Binmas
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key={"ccpolri"}
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm12.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">
|
|
Clean & Clear Polri{" "}
|
|
</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Pelayanan Berbasis Aplikasi untuk Pengaduan Penerimaan
|
|
Anggota POLRI
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>{" "}
|
|
<Link
|
|
href="https://eppid.polri.go.id/"
|
|
target="_blank"
|
|
className="font-semibold"
|
|
>
|
|
E-PPID
|
|
</Link>
|
|
{/* <Dropdown
|
|
className=" dark:bg-[#1F1A17]"
|
|
onOpenChange={(state) => setIsOpen(state)}
|
|
>
|
|
<NavbarItem>
|
|
<DropdownTrigger>
|
|
<Button
|
|
disableRipple
|
|
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
|
|
radius="sm"
|
|
variant="light"
|
|
endContent={<ChevronDownIcon className="pt-1" />}
|
|
>
|
|
{t("publikasi")}
|
|
</Button>
|
|
</DropdownTrigger>
|
|
</NavbarItem>
|
|
<DropdownMenu
|
|
// aria-label="tentang"
|
|
title={t("tentang")}
|
|
className="pt-4"
|
|
classNames={{
|
|
// base: "flex",
|
|
// list: "border-2 gap-2 flex flex-row flex-wrap"
|
|
list: "gap-2 flex flex-row flex-wrap",
|
|
}}
|
|
itemClasses={{
|
|
// base: "border border-red-700 w-[350px]"
|
|
base: "w-[350px]",
|
|
}}
|
|
>
|
|
<DropdownItem key={"humas"}>
|
|
<Link
|
|
href="/static/humas-polri"
|
|
className="flex justify-between"
|
|
>
|
|
{t("tentang")} Humas POLRI
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"profil"}>
|
|
<Link
|
|
href="/static/profile-kapolri"
|
|
className="flex justify-between"
|
|
>
|
|
{t("profilPimpinan")}
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"struktur"}>
|
|
<Link
|
|
href="/static/struktur-mabes"
|
|
className="flex justify-between"
|
|
>
|
|
{t("strukturOrganisasi")}
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"visimisi"}>
|
|
<Link
|
|
href="/static/visi-misi-polri"
|
|
className="flex justify-between"
|
|
>
|
|
{t("visi")} & {t("misi")}
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"fungsi"}>
|
|
<Link
|
|
href="/static/tugas-dan-fungsi-polri"
|
|
className="flex justify-between"
|
|
>
|
|
{t("tugas")} & {t("fungsi")}
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"logo"}>
|
|
<Link href="/static/logo" className="flex justify-between">
|
|
Logo
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown> */}
|
|
<Dropdown
|
|
className=" dark:bg-[#1F1A17]"
|
|
onOpenChange={(state) => setIsOpen(state)}
|
|
>
|
|
<NavbarItem>
|
|
<DropdownTrigger>
|
|
<Button
|
|
disableRipple
|
|
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
|
|
radius="sm"
|
|
variant="light"
|
|
endContent={<ChevronDownIcon className="pt-1" />}
|
|
>
|
|
{t("informasi_publik")}
|
|
</Button>
|
|
</DropdownTrigger>
|
|
</NavbarItem>
|
|
<DropdownMenu
|
|
// aria-label="tentang"
|
|
title={t("tentang")}
|
|
className="pt-4"
|
|
classNames={{
|
|
// base: "flex",
|
|
// list: "border-2 gap-2 flex flex-row flex-wrap"
|
|
list: "gap-2 flex flex-row flex-wrap",
|
|
}}
|
|
itemClasses={{
|
|
// base: "border border-red-700 w-[350px]"
|
|
base: "w-[350px]",
|
|
}}
|
|
>
|
|
<DropdownItem key={"humas"}>
|
|
<Link
|
|
href="https://eppid.polri.go.id/informasi-publik/informasi-berkala"
|
|
className="flex justify-between"
|
|
>
|
|
Informasi Berkala
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"profil"}>
|
|
<Link
|
|
href="https://eppid.polri.go.id/informasi-publik/informasi-serta-merta"
|
|
className="flex justify-between"
|
|
>
|
|
Informasi Serta Merta
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"struktur"}>
|
|
<Link
|
|
href="https://eppid.polri.go.id/informasi-publik/informasi-setiap-saat"
|
|
className="flex justify-between"
|
|
>
|
|
Informasi Setiap Saat
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"visimisi"}>
|
|
<Link
|
|
href="https://eppid.polri.go.id/informasi-publik/informasi-dikecualikan"
|
|
className="flex justify-between"
|
|
>
|
|
Informasi Dikecualikan
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"fungsi"}>
|
|
<Link
|
|
href="https://sisdivkum.id/library/peraturan-kepolisian"
|
|
className="flex justify-between"
|
|
>
|
|
UU & Peraturan
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
<Dropdown
|
|
className=" dark:bg-[#1F1A17]"
|
|
onOpenChange={(state) => setIsOpen(state)}
|
|
>
|
|
<NavbarItem>
|
|
<DropdownTrigger>
|
|
<Button
|
|
disableRipple
|
|
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
|
|
radius="sm"
|
|
variant="light"
|
|
endContent={<ChevronDownIcon className="pt-1" />}
|
|
>
|
|
{t("tentang")}
|
|
</Button>
|
|
</DropdownTrigger>
|
|
</NavbarItem>
|
|
<DropdownMenu
|
|
// aria-label="tentang"
|
|
title={t("tentang")}
|
|
className="pt-4"
|
|
classNames={{
|
|
// base: "flex",
|
|
// list: "border-2 gap-2 flex flex-row flex-wrap"
|
|
list: "gap-2 flex flex-row flex-wrap",
|
|
}}
|
|
itemClasses={{
|
|
// base: "border border-red-700 w-[350px]"
|
|
base: "w-[350px]",
|
|
}}
|
|
>
|
|
<DropdownItem key={"humas"}>
|
|
<Link
|
|
href="/static/humas-polri"
|
|
className="flex justify-between"
|
|
>
|
|
{t("tentang")} Humas POLRI
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"profil"}>
|
|
<Link
|
|
href="/static/profile-kapolri"
|
|
className="flex justify-between"
|
|
>
|
|
{t("profilPimpinan")}
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"struktur"}>
|
|
<Link
|
|
href="/static/struktur-mabes"
|
|
className="flex justify-between"
|
|
>
|
|
{t("strukturOrganisasi")}
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"visimisi"}>
|
|
<Link
|
|
href="/static/visi-misi-polri"
|
|
className="flex justify-between"
|
|
>
|
|
{t("visi")} & {t("misi")}
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"fungsi"}>
|
|
<Link
|
|
href="/static/tugas-dan-fungsi-polri"
|
|
className="flex justify-between"
|
|
>
|
|
{t("tugas")} & {t("fungsi")}
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
<DropdownItem key={"logo"}>
|
|
<Link href="/static/logo" className="flex justify-between">
|
|
Logo
|
|
<ChevronRightIcon />
|
|
</Link>
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
<Dropdown
|
|
className=" dark:bg-[#1F1A17]"
|
|
onOpenChange={(state) => setIsOpen(state)}
|
|
>
|
|
<NavbarItem>
|
|
<DropdownTrigger>
|
|
<Button
|
|
disableRipple
|
|
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
|
|
radius="sm"
|
|
variant="light"
|
|
endContent={<ChevronDownIcon className="pt-1" />}
|
|
>
|
|
{t("aplikasi_terkait")}
|
|
</Button>
|
|
</DropdownTrigger>
|
|
</NavbarItem>
|
|
<DropdownMenu
|
|
aria-label="pelayanan-masyarakat"
|
|
title="pelayanan-masyarakat"
|
|
className="pt-4"
|
|
classNames={{
|
|
list: "gap-2 flex flex-row flex-wrap",
|
|
}}
|
|
itemClasses={{
|
|
base: "w-[450px]",
|
|
}}
|
|
>
|
|
<DropdownItem
|
|
key="superapp"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/at1.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">Polri Super App</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Aplikasi Layanan Perpanjangan SIM, Pembayaran STNK,
|
|
Pengaduan Masyarakat
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="mediahub"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/at2.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">Media Hub</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Humas Polri dalam Data
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="polisiku"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/at3.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">Polisiku</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Membantu anggota Kepolisian untuk mengindetifikasi
|
|
masalah di lapangan{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="sp2hp"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://sp2hp.bareskrim.polri.go.id/",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/at4.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">SP2HP</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="polritv"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=com.polritv",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/at5.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">Polri TV</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Humas Polri dalam Audio Visual
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="polriradio"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=com.polritv",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/at6.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">Polri Radio</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Humas Polri dalam Audio
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="eavis"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://e-avis.korlantas.polri.go.id/",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm6.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">e-Avis</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Platform Ujian Teori SIM{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="erikkes"
|
|
onPress={() => window.open("https://erikkes.id/", "_blank")}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm4.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">e-Rikkes</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Pemeriksaan Kesehatan Berbassi Teknologi Secara Online
|
|
dalam Proses Penerbitan SIM
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
|
|
<DropdownItem
|
|
key="eppsi"
|
|
onPress={() => window.open("https://eppsi.id/", "_blank")}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm5.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">e-PPSI</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Tes Psikologis SIM Secara Online{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="bos"
|
|
onPress={() =>
|
|
window.open("https://bos.polri.go.id/login", "_blank")
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm11.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">BOS </p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Aplikasi Sistem Informasi Satpam Online, BUJP, Pelaporan
|
|
Binmas
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="signal"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=app.signal.id",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm7.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">Signal</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Aplikasi Samsat Digital Nasional{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="skck"
|
|
onPress={() =>
|
|
window.open("https://skck.polri.go.id/", "_blank")
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm8.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">SKCK Online</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Aplikasi Pembuatan SKCK Secara Online{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="propam"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm9.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">Propam Presisi</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Aplikasi Pelayanan Masyarakat untuk Melapor Secara Mudah
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
|
|
<DropdownItem
|
|
key="presisi"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/at14.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">
|
|
Monitoring Presisi
|
|
</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Aplikasi Anggota Binmas dan Satpam Polda Metro Jaya
|
|
Melaporkan Tugas
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="sdm"
|
|
onPress={() =>
|
|
window.open("https://penerimaan.polri.go.id/", "_blank")
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/at15.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">
|
|
SDM - Penerimaan POLRI
|
|
</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Website untuk Memonitoring Penerimaan Anggota POLRI
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="wbs"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://pengaduan-penerimaan.polri.go.id/",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/at16.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">
|
|
Whistle Blowing System{" "}
|
|
</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Website untuk Pengaduan Penerimaan Anggota POLRI{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="dumas"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=com.admasolusi.monitoringpresisi",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm10.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">Dumas Presisi</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Website Layanan Pengaduan Masyarakat Terintegrasi
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
|
|
<DropdownItem
|
|
key="ccpolri"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm12.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[16px] font-bold">
|
|
Clean and Clear POLRI{" "}
|
|
</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Aplikasi untuk Memonitoring Penerimaan Angota POLRI
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
<DropdownItem
|
|
key="korlantas"
|
|
onPress={() =>
|
|
window.open(
|
|
"https://www.digitalkorlantas.id/sim/",
|
|
"_blank"
|
|
)
|
|
}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Image
|
|
width={360}
|
|
height={360}
|
|
alt="logo"
|
|
src="/pm3.png"
|
|
className="w-[50px] h-[50px]"
|
|
/>
|
|
<div className="flex flex-col ">
|
|
<p className="text-[16px] font-bold">Sinar</p>
|
|
<p className="text-ellipsis text-[12px] font-light overflow-hidden">
|
|
Aplikasi dan Website Pelayanan Pendaftaran dan
|
|
Perpanjangan SIM
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex">
|
|
<div className="flex gap-1 lg:gap-3 items-center">
|
|
<Link
|
|
href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
|
|
target="_blank"
|
|
>
|
|
<div className="bg-gray-200 dark:bg-default-900 p-1.5 rounded-md">
|
|
<FbIconNav size={16} />
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href="https://www.instagram.com/divisihumaspolri/"
|
|
target="_blank"
|
|
>
|
|
<div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-0.5 rounded-md">
|
|
<IgIcon size={24} />
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href="https://www.youtube.com/user/pidhumaspolri"
|
|
target="_blank"
|
|
>
|
|
<div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-0.5 rounded-md">
|
|
<YtIcon size={24} />
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href="https://twitter.com/DivHumas_Polri"
|
|
target="_blank"
|
|
>
|
|
<div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-1 rounded-md">
|
|
<TwIcon size={20} />
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href="https://www.tiktok.com/@divhumas_polri"
|
|
target="_blank"
|
|
>
|
|
<div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-0.5 rounded-md">
|
|
<TtIcon size={24} />
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="bg-gray-200 dark:bg-default-900 rounded-md py-0.5 px-1">
|
|
<ThemeSwitch />
|
|
</div>
|
|
<a
|
|
className="cursor-pointer"
|
|
onClick={() =>
|
|
language === "id" ? setLanguage("en") : setLanguage("id")
|
|
}
|
|
>
|
|
{language === "id" ? <IdnIcon /> : <UKIcon />}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="hidden lg:block w-full">{searchInput}</div>
|
|
|
|
{/* <a
|
|
className="cursor-pointer"
|
|
onClick={() =>
|
|
language === "id" ? setLanguage("en") : setLanguage("id")
|
|
}
|
|
>
|
|
{language === "id" ? <IdnIcon /> : <UKIcon />}
|
|
</a>
|
|
<div>
|
|
<ThemeSwitch />
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<NavbarContent
|
|
className={`px-2 lg:hidden transition-all duration-300 ease-in-out backdrop-opacity-10 ${
|
|
isScrolled ? "bg-slate-100 dark:bg-[#1F1A17] " : "bg-opacity-50"
|
|
}`}
|
|
>
|
|
<div className="flex justify-between w-full">
|
|
<Link href={"/"}>
|
|
<Image
|
|
width={480}
|
|
height={480}
|
|
src="/logohumas.png"
|
|
alt="logo"
|
|
className="w-[78px]"
|
|
/>
|
|
</Link>
|
|
<div className="flex flex-row gap-3 items-center">
|
|
<a
|
|
className="cursor-pointer"
|
|
onClick={() =>
|
|
language === "id" ? setLanguage("en") : setLanguage("id")
|
|
}
|
|
>
|
|
{language === "id" ? <IdnIcon size={24} /> : <UKIcon />}
|
|
</a>
|
|
<ThemeSwitch />
|
|
<NavbarMenuToggle />
|
|
<NavbarMenu>
|
|
{/* {searchInput} */}
|
|
<div className="mt-1 flex flex-col gap-1">
|
|
{siteConfig.humasMenuItems.map((item) => (
|
|
<div key={item.key} className="relative">
|
|
<NavbarMenuItem>
|
|
{item.key === "login" ? (
|
|
token ? (
|
|
<Button
|
|
className="bg-[#DD8306] text-white"
|
|
onPress={onLogout}
|
|
>
|
|
Logout
|
|
</Button>
|
|
) : (
|
|
<Link href="/auth">
|
|
<Button className="bg-[#DD8306] text-white">
|
|
Login
|
|
</Button>
|
|
</Link>
|
|
)
|
|
) : item.key === "dashboard" ? (
|
|
token && (
|
|
<Link href="/admin/dashboard">
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
)
|
|
) : (
|
|
<div
|
|
onClick={() => toggleDropdown(item.key)}
|
|
className="flex items-end gap-2"
|
|
>
|
|
{item.href ? (
|
|
<Link href={item.href} target="_blank">
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
) : (
|
|
<span>{t(item.label)}</span>
|
|
)}
|
|
{item.submenu &&
|
|
(dropdownOpen[item.key] ? (
|
|
<ChevronUpIcon />
|
|
) : (
|
|
<ChevronDownIcon />
|
|
))}
|
|
</div>
|
|
)}
|
|
</NavbarMenuItem>
|
|
{dropdownOpen[item.key] && item.submenu && (
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{item.submenu.map((subItem: any, subIndex) => (
|
|
<div key={subIndex}>
|
|
<Link
|
|
href={subItem.href}
|
|
target={subItem.blank ? "_black" : ""}
|
|
className="flex flex-row gap-2 items-center text-sm"
|
|
>
|
|
{subItem.img && (
|
|
<Image
|
|
width={480}
|
|
height={480}
|
|
alt={subItem.img}
|
|
src={subItem.img}
|
|
className="w-[35px] h-[35px] object-cover"
|
|
/>
|
|
)}
|
|
{subItem.multi
|
|
? t(subItem.multi)
|
|
: subItem.label}
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</NavbarMenu>
|
|
</div>
|
|
</div>
|
|
</NavbarContent>
|
|
</div>
|
|
</Navbar>
|
|
);
|
|
}
|