335 lines
12 KiB
TypeScript
335 lines
12 KiB
TypeScript
"use client";
|
|
import { Button, LinkIcon, ScrollShadow } from "@heroui/react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { EyeIcon } from "../icons";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { getListArticle } from "@/services/article";
|
|
import { convertDateFormat } from "@/utils/global";
|
|
|
|
export default function SidebarNav() {
|
|
const [selectedTab, setSelectedTab] = useState("media");
|
|
|
|
const [article, setArticle] = useState<any>([]);
|
|
|
|
useEffect(() => {
|
|
async function getArticle() {
|
|
const req = { page: 1, search: "", limit: "10" };
|
|
|
|
const response = await getListArticle(req);
|
|
setArticle(response?.data?.data);
|
|
}
|
|
getArticle();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div className="mt-4 lg:mt-0 flex flex-wrap justify-center lg:flex-col gap-4 px-1 lg:px-5">
|
|
<Image
|
|
src="/sertifikat-1.png"
|
|
width={480}
|
|
height={720}
|
|
className="shadow-md rounded-lg lg:h-[67vh]"
|
|
alt="certificate"
|
|
/>
|
|
{/* <div className="text-[15px] flex flex-row gap-10">
|
|
<a
|
|
onClick={() => setSelectedTab("media")}
|
|
className={
|
|
selectedTab === "media"
|
|
? "text-black border-b-3 border-red-400 cursor-pointer py-2"
|
|
: "text-slate-300 cursor-pointer py-2"
|
|
}
|
|
>
|
|
Media Update
|
|
</a>
|
|
<a
|
|
onClick={() => setSelectedTab("video")}
|
|
className={
|
|
selectedTab === "video"
|
|
? "text-black border-b-3 border-red-400 cursor-pointer py-2"
|
|
: "text-slate-300 cursor-pointer py-2"
|
|
}
|
|
>
|
|
Video Virtual
|
|
</a>
|
|
</div>
|
|
{selectedTab === "media" ? (
|
|
<div className="h-[410px] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-lg">
|
|
<ScrollShadow hideScrollBar className=" h-[345px]">
|
|
{article?.map((list: any) => (
|
|
<div
|
|
key={list.id}
|
|
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
|
|
>
|
|
<Link href={`news/detail/${list?.id}`}>
|
|
<p className="text-left font-semibold">{list?.title}</p>
|
|
</Link>
|
|
<div className="flex flex-row gap-1">
|
|
<p className="py-[2px] text-left text-xs">
|
|
{convertDateFormat(list?.createdAt)} WIB
|
|
</p>
|
|
<p className="flex items-center gap-1 text-xs">
|
|
<EyeIcon />
|
|
{list?.viewCount === null ? 0 : list?.viewCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</ScrollShadow>
|
|
<Button
|
|
className="w-full bg-[#DD8306] text-white font-bold rounded-md focus:outline-none"
|
|
radius="none"
|
|
>
|
|
Lihat Semua
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="w-full">
|
|
<iframe
|
|
width="100%"
|
|
height="410"
|
|
src="https://www.youtube.com/embed/7oRcWfl9lxE?si=G_CZfXak_AiHjGzG"
|
|
title="YouTube video player"
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerPolicy="strict-origin-when-cross-origin"
|
|
allowFullScreen
|
|
></iframe>
|
|
</div>
|
|
)} */}
|
|
{/* <p className="text-[15px] border-b-3 border-red-500 w-fit py-2">
|
|
Pelayanan Informasi Publik
|
|
</p>
|
|
<img src="pelayanan-informasi-publik.png" className="w-full" /> */}
|
|
{/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600 ">
|
|
SERTIFIKAT ISO 9001:2015
|
|
</div>
|
|
<div className="h-[370px] text-white rounded-md">
|
|
<Image
|
|
height={200}
|
|
width={380}
|
|
src="/sertifikat.png"
|
|
alt="publikasi"
|
|
/>
|
|
</div> */}
|
|
|
|
<div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
|
|
Publikasi
|
|
<div className="flex flex-col gap-3 pt-3">
|
|
{/* <Image
|
|
height={200}
|
|
width={400}
|
|
src="/publikasi1.png"
|
|
alt="publikasi"
|
|
/>
|
|
<Image
|
|
height={200}
|
|
width={400}
|
|
src="/publikasi2.png"
|
|
alt="publikasi"
|
|
/> */}
|
|
<Link
|
|
href="https://humas.polri.go.id/wp-content/uploads/2023/08/LAPORAN-HASIL-KEUANGAN-SEMESTER-I-DIVISI-HUMAS-POLRI-2.pdf"
|
|
target="_blank"
|
|
>
|
|
<Image
|
|
height={200}
|
|
width={400}
|
|
src="/publikasi3.png"
|
|
alt="publikasi"
|
|
/>
|
|
</Link>
|
|
<Link href="https://lpse.polri.go.id/eproc4" target="_blank">
|
|
<Image
|
|
height={200}
|
|
width={400}
|
|
src="/publikasi4.png"
|
|
alt="publikasi"
|
|
/>
|
|
</Link>
|
|
<Image
|
|
height={200}
|
|
width={400}
|
|
src="/publikasi5.png"
|
|
alt="publikasi"
|
|
/>
|
|
<Image
|
|
height={200}
|
|
width={400}
|
|
src="/publikasi6.png"
|
|
alt="publikasi"
|
|
/>
|
|
{/* <Link href="https://tribratanews.polri.go.id/" target="_blank">
|
|
<Image
|
|
height={200}
|
|
width={400}
|
|
src="/publikasi7.png"
|
|
alt="publikasi"
|
|
/>
|
|
</Link> */}
|
|
</div>
|
|
</div>
|
|
<div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
|
|
Channel Humas Polri
|
|
<div className="flex flex-col gap-3 m-10">
|
|
<Link
|
|
href="https://portal.humas.polri.go.id/library"
|
|
target="_blank"
|
|
>
|
|
<Image
|
|
height={100}
|
|
width={300}
|
|
src="/portal-humas1.png"
|
|
alt="humas-polri"
|
|
/>
|
|
</Link>
|
|
<Link href="https://mediahub.polri.go.id/" target="_blank">
|
|
<Image
|
|
height={100}
|
|
width={300}
|
|
src="/humas1.png"
|
|
alt="humas-polri"
|
|
/>
|
|
</Link>
|
|
<Link href="https://spit.humas.polri.go.id/" target="_blank">
|
|
<Image
|
|
height={100}
|
|
width={300}
|
|
src="/humas2.png"
|
|
alt="humas-polri"
|
|
/>
|
|
</Link>
|
|
<Link href="https://tvradio.polri.go.id/" target="_blank">
|
|
<Image
|
|
height={100}
|
|
width={300}
|
|
src="/humas3.png"
|
|
alt="humas-polri"
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href="https://tribratanews.polri.go.id/"
|
|
target="_blank"
|
|
className="border-2 rounded-md shadow-sm"
|
|
>
|
|
<Image
|
|
height={100}
|
|
width={300}
|
|
src="/humas4.png"
|
|
alt="humas-polri"
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href="https://inp.polri.go.id/"
|
|
target="_blank"
|
|
className="border-2 rounded-md shadow-sm px-2"
|
|
>
|
|
<Image
|
|
height={100}
|
|
width={300}
|
|
src="/humas5.png"
|
|
alt="humas-polri"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <p className="text-[15px] border-b-3 border-red-500 py-2 w-fit mx-1 lg:mx-5">
|
|
{" "}
|
|
Info Eksternal
|
|
</p>
|
|
<div className="flex flex-col mt-3 w-full px-2 lg:px-5 gap-3">
|
|
<div className="bg-white text-black text-sm border-2 rounded-md p-4 shadow-md">
|
|
<img src="/eksternal1.png" alt="" className="w-full" />
|
|
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-3">
|
|
<Link href="https://www.bps.go.id/id/news" target="_blank">
|
|
Berita BPS
|
|
</Link>
|
|
</p>
|
|
<p className="text-xs text-gray-500 pt-1">
|
|
Berita terbaru dari Badan Pusat Statistika Indonesia
|
|
</p>
|
|
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
|
|
<Link href="https://www.bps.go.id/id/publication" target="_blank">
|
|
Pengumuman BPS
|
|
</Link>
|
|
</p>
|
|
<p className="text-xs text-gray-500 pt-1s">
|
|
Pengumuman terbaru dari Badan Pusat Statistika Indonesia
|
|
</p>
|
|
</div>
|
|
<div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
|
|
<img src="/eksternal2.png" alt="" className="w-full" />
|
|
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
|
|
<Link
|
|
href="https://www.kpu.go.id/berita/104/berita-terkini"
|
|
target="_blank"
|
|
>
|
|
Berita KPU
|
|
</Link>
|
|
</p>
|
|
<p className="text-xs text-gray-500 pt-1">
|
|
Berita terbaru dari Komisi Pemilihan Umum Indonesia
|
|
</p>
|
|
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
|
|
<Link
|
|
href="https://www.kpu.go.id/berita/11/pengumumanse"
|
|
target="_blank"
|
|
>
|
|
Pengumuman KPU
|
|
</Link>
|
|
</p>
|
|
<p className="text-xs text-gray-500 pt-1s">
|
|
Pengumuman terbaru dari Komisi Pemilihan Umum Indonesia
|
|
</p>
|
|
</div>
|
|
<div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
|
|
<img src="/eksternal3.png" alt="" className="w-full" />
|
|
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
|
|
<Link href="https://www.bawaslu.go.id/" target="_blank">
|
|
Berita BAWASLU
|
|
</Link>
|
|
</p>
|
|
<p className="text-xs text-gray-500 pt-1">
|
|
Berita terbaru dari Badan Pengawas Pemilihan Umum Republik Indonesia
|
|
</p>
|
|
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
|
|
<Link
|
|
href="https://www.bawaslu.go.id/id/pengumuman"
|
|
target="_blank"
|
|
>
|
|
Pengumuman BAWASLU
|
|
</Link>
|
|
</p>
|
|
<p className="text-xs text-gray-500 pt-1s">
|
|
Pengumuman terbaru dari Badan Pusat Statistika Indonesia
|
|
</p>
|
|
</div>
|
|
<div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
|
|
<img src="/eksternal4.png" alt="" className="w-full" />
|
|
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
|
|
<Link href="https://www.kpai.go.id/" target="_blank">
|
|
Info KPAI
|
|
</Link>
|
|
</p>
|
|
<p className="text-xs text-gray-500 pt-1">
|
|
Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia
|
|
</p>
|
|
</div>
|
|
<div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
|
|
<img src="/eksternal5.png" alt="" className="w-full" />
|
|
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
|
|
<Link href="https://www.komnasperempuan.go.id/" target="_blank">
|
|
INFO KOMNAS PEREMPUAN
|
|
</Link>
|
|
</p>
|
|
<p className="text-xs text-gray-500 pt-1">
|
|
Info dan Berita terbaru dari Komnas Perempuan Indonesia
|
|
</p>
|
|
</div>
|
|
</div> */}
|
|
</>
|
|
);
|
|
}
|