humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:landing menus

This commit is contained in:
Rama Priyanto 2025-02-28 15:44:20 +07:00
parent 286a8e6946
commit 30f2a97a68
3 changed files with 256 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
components/landing/banner-new.tsx
View File

@ -25,9 +25,20 @@ import {
DropdownItem,
Button,
Input,
Modal,
ModalContent,
ModalHeader,
ModalBody,
useDisclosure,
Popover,
PopoverTrigger,
PopoverContent,
Accordion,
AccordionItem,
} from "@heroui/react";
import storedLanguage from "@/store/language-store";
import { ThemeSwitch } from "../theme-switch";
import { siteConfig, SiteConfig } from "@/config/site";
const images = [
"/landing-1.jpg",
@ -38,9 +49,11 @@ const images = [
export default function BannerHumasNew() {
const t = useTranslations("Banner");
const { isOpen, onOpen, onOpenChange } = useDisclosure();
const [currentIndex, setCurrentIndex] = useState(0);
const [resetTimer, setResetTimer] = useState(0);
const [onOpen, setOnOpen] = useState(false);
const [onOpenDropdown, setOnOpenDropdown] = useState(false);
const [searchValue, setSearchValue] = useState("");
const language = storedLanguage((state) => state.locale);
const setLanguage = storedLanguage((state) => state.setLocale);
@ -64,6 +77,120 @@ export default function BannerHumasNew() {
setResetTimer((prev) => prev + 1);
};
const MenuPopover = (props: {
title: string;
menus: any;
placement: "right" | "right-end" | "right-start";
withImage: boolean;
}) => {
const { title, placement, menus, withImage } = props;
return (
<Popover placement={placement} classNames={{ content: "w-fit" }}>
<PopoverTrigger>
<a className="cursor-pointer px-2 w-full font-semibold text-sm flex justify-between hover:underline">
{title}
<ChevronRightIcon />
</a>
</PopoverTrigger>
<PopoverContent className="ml-2 w-fit">
<div
className={` px-1 py-2 text-black grid gap-2 ${
withImage ? " grid-cols-3" : "grid-cols-1 gap-2"
} `}
>
{menus?.map((menu: any) => (
<Link
key={menu.label}
className={` flex flex-row gap-2 items-center group`}
href={menu.href}
target="_blank"
>
{withImage && (
<Image
width={720}
height={720}
alt="logo"
src={menu.img}
className="w-[45px] h-[45px]"
/>
)}
<div
className={
withImage ? `flex flex-col` : "flex justify-between w-full"
}
>
<p className="text-[14px] font-semibold group-hover:underline">
{menu.label}
</p>
{withImage && (
<p className="text-[10px] font-light overflow-hidden">
{menu.desc}
</p>
)}
</div>
</Link>
))}
</div>
</PopoverContent>
</Popover>
);
};
const MenuPopoverMobile = (props: {
title: string;
menus: any;
placement: "right" | "right-end" | "right-start";
withImage: boolean;
}) => {
const { title, placement, menus, withImage } = props;
return (
<Accordion className="w-full">
<AccordionItem
key={title}
aria-label={title}
title={title}
classNames={{ title: "font-semibold" }}
>
<div
className={` px-1 py-2 text-black grid gap-2 ${
withImage ? " grid-cols-2 " : "grid-cols-2"
} `}
>
{menus?.map((menu: any) => (
<Link
key={menu.label}
className={` flex flex-row gap-2 items-center group`}
href={menu.href}
target="_blank"
>
{withImage && (
<Image
width={720}
height={720}
alt="logo"
src={menu.img}
className="w-[35px] h-[35px]"
/>
)}
<div
className={
withImage ? `flex flex-col` : "flex justify-between w-full"
}
>
<p className="text-[14px] group-hover:underline">
{menu.label}
</p>
</div>
</Link>
))}
</div>
</AccordionItem>
</Accordion>
);
};
return (
<div className="h-fit relative text-white overflow-hidden">
<div
@ -104,29 +231,81 @@ export default function BannerHumasNew() {
</div>
<div className="flex flex-col lg:flex-row lg:justify-between gap-4 mt-10">
<div className="flex flex-row gap-6">
<Dropdown onOpenChange={setOnOpen}>
<DropdownTrigger>
<Popover
placement="bottom"
isOpen={onOpenDropdown}
onOpenChange={setOnOpenDropdown}
>
<PopoverTrigger>
<Button
className="w-full lg:w-[200px] bg-white dark:bg-stone-900"
className="w-full lg:w-[225px] bg-white dark:bg-stone-900"
radius="sm"
endContent={
onOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
onOpenDropdown ? <ChevronUpIcon /> : <ChevronDownIcon />
}
>
<p className="text-left w-full font-bold text-md">Menu</p>
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="pemas">Pelayanan Masyarakat</DropdownItem>
<DropdownItem key="info">Informasi Publik</DropdownItem>
<DropdownItem key="tentang">Tentang</DropdownItem>
<DropdownItem key="apps">Aplikasi Polri</DropdownItem>
</DropdownMenu>
</Dropdown>
</PopoverTrigger>
<PopoverContent className="w-full lg:w-[225px] py-3 px-2">
<div className="space-y-1 hidden lg:block">
<MenuPopover
title="Pelayanan Masyarakat"
menus={siteConfig.humasMenuItems[0].submenu}
placement="right"
withImage={true}
/>
<MenuPopover
title="Informasi Publik"
menus={siteConfig.humasMenuItems[2].submenu}
placement="right-start"
withImage={false}
/>
<MenuPopover
title="Tentang"
menus={siteConfig.humasMenuItems[3].submenu}
placement="right-start"
withImage={false}
/>
<MenuPopover
title="Aplikasi Polri"
menus={siteConfig.humasMenuItems[4].submenu}
placement="right"
withImage={true}
/>
</div>
<div className="space-y-1 lg:hidden w-[90vw] max-h-[50vh] overflow-auto">
<MenuPopoverMobile
title="Pelayanan Masyarakat"
menus={siteConfig.humasMenuItems[0].submenu}
placement="right"
withImage={true}
/>
<MenuPopoverMobile
title="Informasi Publik"
menus={siteConfig.humasMenuItems[2].submenu}
placement="right-start"
withImage={false}
/>
<MenuPopoverMobile
title="Tentang"
menus={siteConfig.humasMenuItems[3].submenu}
placement="right-start"
withImage={false}
/>
<MenuPopoverMobile
title="Aplikasi Polri"
menus={siteConfig.humasMenuItems[4].submenu}
placement="right"
withImage={true}
/>
</div>
</PopoverContent>
</Popover>
<Link href={`https://eppid.polri.go.id/`}>
<Button className="bg-white dark:bg-stone-900" radius="sm">
<p className="font-bold w-full ">e-PPID Polri</p>
</Button>{" "}
</Button>
</Link>
</div>
<Input
@ -218,18 +397,5 @@ export default function BannerHumasNew() {
</div>
</div>
</div>
// <div
// className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg`}
// style={{ backgroundImage: `url('/landing-3.jpg')` }}
// />
// <div
// className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg relative`}
// >
// <div
// className="absolute inset-0 bg-black bg-opacity-100 bg-cover bg-center object-cover"
// style={{ backgroundImage: `url('/landing-3.jpg')` }}
// />
// <div className="flex flex-row p-4">Your Text Here</div>
// </div>
);
}

2
components/layout/navbar/NavbarHumas.tsx
View File

@ -1337,7 +1337,7 @@ export default function NavbarHumas(props: { size: string }) {
language === "id" ? setLanguage("en") : setLanguage("id")
}
>
{language === "id" ? <IdnIcon /> : <UKIcon />}
{language === "id" ? <IdnIcon size={24} /> : <UKIcon />}
</a>
<ThemeSwitch />
<NavbarMenuToggle />

93
config/site.ts
View File

@ -34,74 +34,86 @@ export const siteConfig = {
{
label: "SP2HP",
href: "https://sp2hp.bareskrim.polri.go.id/",
img: "at4.png",
img: "/at4.png",
blank: true,
desc: " Pelayanan Surat Pemberitahuan Perkembangan Hasil Penyidikan Online",
},
{
label: "Formulir Permohonan Informasi",
href: "#",
img: "pm2.png",
img: "/pm2.png",
blank: false,
desc: "Pelayanan Permohonan Formulir Informasi",
},
{
label: "Pelayanan SIM",
href: "https://www.digitalkorlantas.id/sim/",
img: "pm3.png",
img: "/pm3.png",
blank: true,
desc: "Pelayanan Untuk Pendaftaran SIM dan Perpanjangan SIM Berbasis Online",
},
{
label: "Pelayanan e-Rikkes SIM",
href: "https://erikkes.id/",
img: "pm4.png",
img: "/pm4.png",
blank: true,
desc: "Pelayanan Pemeriksaan Kesehatan Berbasis Teknologi Berbasis Online Dalam Proses Penerbitan SIM",
},
{
label: "Pelayanan Test Psikologi SIM",
href: "https://eppsi.id/",
img: "pm5.png",
img: "/pm5.png",
blank: true,
desc: "Pelayanan Pembuatan Test Psikologi SIM Berbasis Online",
},
{
label: "Pelayanan e-Avis",
href: "https://e-avis.korlantas.polri.go.id/",
img: "pm6.png",
img: "/pm6.png",
blank: true,
desc: "Pelayanan Ujian Teori SIM Berbasis Online",
},
{
label: "Pelayanan Samsat Digital",
href: "https://samsatdigital.id/",
img: "pm7.png",
img: "/pm7.png",
blank: true,
desc: "Pelayanan Samsat Berbasis Online",
},
{
label: "Pelayanan SKCK",
href: "https://skck.polri.go.id/",
img: "pm8.png",
img: "/pm8.png",
blank: true,
desc: "Pelayanan Pembuatan SKCK Berbasis Online",
},
{
label: "Pelayanan Propam Presisi",
href: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam&pli=1",
img: "pm9.png",
img: "/pm9.png",
blank: true,
desc: "Pelayanan Untuk Masyarakat Agar Mudah Melaporkan Sesuatu Kejadian atau Kejahatan",
},
{
label: "Pelayanan Dumas Presisi",
href: "https://dumaspresisi.polri.go.id/",
img: "pm10.png",
img: "/pm10.png",
blank: true,
desc: "Layanan Pengaduan Masyarakat Terintegrasi Berbasis Online",
},
{
label: "Pelayanan Binmas",
href: "https://bos.polri.go.id/login",
img: "pm11.png",
img: "/pm11.png",
blank: true,
desc: "Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas",
},
{
label: "Clean & Clear Polri",
href: "#",
img: "pm12.png",
img: "/pm12.png",
blank: true,
desc: " Pelayanan Berbasis Aplikasi untuk Pengaduan Penerimaan Anggota POLRI",
},
],
},
@ -200,116 +212,135 @@ export const siteConfig = {
{
label: "Polri Super App",
href: "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
img: "at1.png",
img: "/at1.png",
blank: true,
desc: "Aplikasi Layanan Perpanjangan SIM, Pembayaran STNK, Pengaduan Masyarakat",
},
{
label: "Media Hub",
href: "https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
img: "at2.png",
img: "/at2.png",
blank: true,
desc: "Humas Polri dalam Data",
},
{
label: "Polisiku",
href: "https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
img: "at3.png",
img: "/at3.png",
blank: true,
desc: "Membantu anggota Kepolisian untuk mengindetifikasi masalah di lapangan",
},
{
label: "SP2HP",
href: "https://sp2hp.bareskrim.polri.go.id/",
img: "at4.png",
img: "/at4.png",
blank: true,
desc: "Surat Pemberitahuan Perkembangan Hasil Penyidikan Online",
},
{
label: "Polri TV",
href: "https://play.google.com/store/apps/details?id=com.polritv",
img: "at5.png",
img: "/at5.png",
blank: true,
desc: "Humas Polri dalam Audio Visual",
},
{
label: "Polri Radio",
href: "https://play.google.com/store/apps/details?id=com.polritv",
img: "at6.png",
img: "/at6.png",
blank: true,
desc: "Humas Polri dalam Audio",
},
{
label: "e-Avis",
href: "https://e-avis.korlantas.polri.go.id/",
img: "pm6.png",
img: "/pm6.png",
blank: true,
desc: "Platform Ujian Teori SIM",
},
{
label: "e-Rikkes",
href: "https://erikkes.id/",
img: "pm4.png",
img: "/pm4.png",
blank: true,
desc: " Pemeriksaan Kesehatan Berbassi Teknologi Secara Online dalam Proses Penerbitan SIM",
},
{
label: "e-PPSI",
href: "https://eppsi.id/",
img: "pm5.png",
img: "/pm5.png",
blank: true,
desc: "Tes Psikologis SIM Secara Online",
},
{
label: "BOS",
href: "https://bos.polri.go.id/login",
img: "pm11.png",
img: "/pm11.png",
blank: true,
desc: "Aplikasi Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas",
},
{
label: "Signal",
href: "https://play.google.com/store/apps/details?id=app.signal.id",
img: "pm7.png",
img: "/pm7.png",
blank: true,
desc: "Aplikasi Samsat Digital Nasional",
},
{
label: "SKCK Online",
href: "https://skck.polri.go.id/",
img: "pm8.png",
img: "/pm8.png",
blank: true,
desc: "Aplikasi Pembuatan SKCK Secara Online",
},
{
label: "Propam Presisi",
href: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
img: "pm9.png",
img: "/pm9.png",
blank: true,
desc: "Aplikasi Pelayanan Masyarakat untuk Melapor Secara Mudah",
},
{
label: "Monitoring Presisi",
href: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
img: "at14.png",
img: "/at14.png",
blank: true,
desc: "Aplikasi Anggota Binmas dan Satpam Polda Metro Jaya Melaporkan Tugas",
},
{
label: "SDM - Penerimaan POLRI",
href: "https://penerimaan.polri.go.id/",
img: "at15.png",
img: "/at15.png",
blank: true,
desc: "Website untuk Memonitoring Penerimaan Anggota POLRI",
},
{
label: "Whistle Blowing System",
href: "https://pengaduan-penerimaan.polri.go.id/",
img: "at16.png",
img: "/at16.png",
blank: true,
desc: "Website untuk Pengaduan Penerimaan Anggota POLRI",
},
{
label: "Dumas Presisi",
href: "https://play.google.com/store/apps/details?id=com.admasolusi.monitoringpresisi",
img: "pm10.png",
img: "/pm10.png",
blank: true,
desc: "Website Layanan Pengaduan Masyarakat Terintegrasi",
},
{
label: "Clean & Clear Polri",
href: "#",
img: "pm12.png",
img: "/pm12.png",
blank: true,
desc: "Aplikasi untuk Memonitoring Penerimaan Angota POLRI",
},
{
label: "Sinar",
href: "https://www.digitalkorlantas.id/sim/",
img: "pm3.png",
img: "/pm3.png",
blank: true,
desc: " Aplikasi dan Website Pelayanan Pendaftaran dan Perpanjangan SIM",
},
],
},