351 lines
13 KiB
TypeScript
351 lines
13 KiB
TypeScript
"use client";
|
|
import { Button, LinkIcon, ScrollShadow } from "@nextui-org/react";
|
|
import React, { useState } from "react";
|
|
import { EyeIcon } from "../icons";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export default function SidebarNav() {
|
|
const [article, setArticle] = useState<any>([]);
|
|
const [selectedTab, setSelectedTab] = useState("media");
|
|
|
|
return (
|
|
<>
|
|
<div className="space-y-4 px-5">
|
|
<div className="text-[20px] 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 bg-[#020101] text-white rounded-md border-2 border-white">
|
|
<ScrollShadow hideScrollBar className=" h-[345px]">
|
|
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
|
|
<p>
|
|
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
|
|
Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari
|
|
</p>
|
|
<p className="py-[2px]">21-07-2023 13:50</p>
|
|
<p className="flex items-center gap-1">
|
|
<EyeIcon />
|
|
82
|
|
</p>
|
|
</div>
|
|
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
|
|
<p>
|
|
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
|
|
Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari
|
|
</p>
|
|
<p className="py-[2px]">21-07-2023 13:50</p>
|
|
<p className="flex items-center gap-1">
|
|
<EyeIcon />
|
|
82
|
|
</p>
|
|
</div>
|
|
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
|
|
<p>
|
|
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
|
|
Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari
|
|
</p>
|
|
<p className="py-[2px]">21-07-2023 13:50</p>
|
|
<p className="flex items-center gap-1">
|
|
<EyeIcon />
|
|
82
|
|
</p>
|
|
</div>
|
|
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
|
|
<p>
|
|
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
|
|
Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari
|
|
</p>
|
|
<p className="py-[2px]">21-07-2023 13:50</p>
|
|
<p className="flex items-center gap-1">
|
|
<EyeIcon />
|
|
82
|
|
</p>
|
|
</div>
|
|
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
|
|
<p>
|
|
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
|
|
Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari
|
|
</p>
|
|
<p className="py-[2px]">21-07-2023 13:50</p>
|
|
<p className="flex items-center gap-1">
|
|
<EyeIcon />
|
|
82
|
|
</p>
|
|
</div>
|
|
</ScrollShadow>
|
|
<Button
|
|
className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-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-xl 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-xl border-b-3 border-red-500 py-2 w-fit mx-5">
|
|
{" "}
|
|
Info Eksternal
|
|
</p>
|
|
<div className="flex flex-col mt-3 w-full 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>
|
|
</>
|
|
);
|
|
}
|