web-humas-fe/components/Portal PPID/Statistics.tsx

'use client'
import React from 'react'

export default function Statistics() {
    return (
        <div className='p-1 md:p-4 text-black'>
            <p className='text-lg font-semibold underline underline-offset-8 decoration-red-600 pb-5'>Statistik Pengunjung</p>
            <div className='w-auto  grid grid-cols-2 lg:grid-cols-4 bg-white rounded-lg'>
                <div className='flex flex-col items-center py-2 border-r-2 border-red-500 my-3 '>
                    <div><img src="/pengaduan.png" alt="laporan" /></div>
                    <div className='text-xl font-bold text-[#DD8306]'>5,000+</div>
                    <div className='text-sm font font-bold text-[#DD8306]'>Pengaduan</div>
                </div>
                <div className='flex flex-col items-center py-2 border-r-2 border-red-500 my-3'>
                    <div><img src="/permintaan-informasi.png" alt="laporan" /></div>
                    <div className='text-xl font-bold text-[#DD8306]'>97,439+</div>
                    <div className='text-sm font font-bold text-[#DD8306]'>Permintaan Informasi</div>
                </div>
                <div className='flex flex-col items-center py-2 border-r-2 border-red-500 my-3'>
                    <div><img src="/keberatan.png" alt="laporan" /></div>
                    <div className='text-xl font-bold text-[#DD8306]'>39+</div>
                    <div className='text-sm font font-bold text-[#DD8306]'>Keberatan</div>
                </div>
                <div className='flex flex-col items-center py-2 border-r-2 border-red-500 my-3'>
                    <div><img src="/lapor.png" alt="laporan" /></div>
                    <div className='text-xl font-bold text-[#DD8306]'>16+</div>
                    <div className='text-sm font font-bold text-[#DD8306]'>Lapor!</div>
                </div>
            </div>
        </div>
    )
}