web-humas-fe/components/landing/SidebarNav.tsx

import { Button, LinkIcon, ScrollShadow } from '@nextui-org/react'
import React from 'react'
import { EyeIcon } from '../icons'
import Image from 'next/image'
import Link from 'next/link'

export default function SidebarNav() {
    return (
        <>
            <div className='space-y-4'>
                <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 '>
                    Media Update
                </div>
                <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] font-bold rounded-bl-md rounded-br-md focus:outline-none'
                        radius='none'
                    >
                        Lihat Semua
                    </Button>
                </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>
            <div className='text-xl font-semibold underline underline-offset-4 decoration-red-600 pb-5'>Info Eksternal</div>
            <div className='flex flex-col items-center space-y-7'>
                <div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] 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 lg:w-[300px] 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 lg:w-[300px] 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 lg:w-[300px] 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 lg:w-[300px] 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>
        </>
    )
}