web-humas-fe/components/Landing Page/SidebarNav.tsx

import { ScrollShadow } from '@nextui-org/react'
import React from 'react'
import { EyeIcon } from '../icons'

export default function SidebarNav() {
    return (
        <>
            <div className='space-y-4'>
                <div className='text-xl font-semibold underline underline-offset-4 decoration-red-600 '>
                    Media Update
                </div>
                <div className='h-[360px] p-2 bg-[#020101] text-white rounded-md border-2 border-white'>
                    <ScrollShadow hideScrollBar className=" h-[343px]">
                        <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>
                </div>
                <div className='text-xl font-semibold underline underline-offset-4 decoration-red-600'>Publikasi
                    <div className='flex flex-col gap-3 pt-3'>
                        <img src="/publikasi1.png" alt="publikasi" />
                        <img src="/publikasi2.png" alt="publikasi" />
                        <img src="/publikasi3.png" alt="publikasi" />
                        <img src="/publikasi4.png" alt="publikasi" />
                        <img src="/publikasi5.png" alt="publikasi" />
                        <img src="/publikasi6.png" alt="publikasi" />
                        <img src="/publikasi7.png" alt="publikasi" />
                    </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'>
                        <img src="/humas1.png" alt="humas-polri" />
                        <img src="/humas2.png" alt="humas-polri" />
                        <img src="/humas3.png" alt="humas-polri" />
                        <img src="/humas4.png" alt="humas-polri" />
                    </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 space-y-4'>
                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                    <img src="/eksternal1.png" alt="" className='w-full' />
                    <p className='leading-tight text-blue-500 pt-3'>Berita BPS</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 pt-2'>Pengumuman BPS</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 m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                    <img src="/eksternal2.png" alt="" className='w-full' />
                    <p className='leading-tight text-blue-500 pt-5'>Berita KPU</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 pt-2'>Pengumuman KPU</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 m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                    <img src="/eksternal3.png" alt="" className='w-full' />
                    <p className='leading-tight text-blue-500 pt-5'>Berita BAWASLU</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 pt-2'>Pengumuman BAWASLU</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 m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                    <img src="/eksternal4.png" alt="" className='w-full' />
                    <p className='leading-tight text-blue-500 pt-5'>Info KPAI</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 m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                    <img src="/eksternal5.png" alt="" className='w-full' />
                    <p className='leading-tight text-blue-500 pt-5'>INFO KOMNAS PEREMPUAN</p>
                    <p className='text-xs text-gray-500 pt-1'>Info dan Berita terbaru dari Komnas Perempuan Indonesia</p>
                </div>
            </div>
        </>
    )
}