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

import { Button, Card, CardBody, CardFooter, ScrollShadow } from '@nextui-org/react'
import React from 'react'
import { EyeIcon } from '../icons'
import Image from 'next/image'

export default function HeaderNews() {
    return (
        <div className='md:flex items-center text-center bg-black dark:bg-white  rounded-md gap-3 p-2'>
            <div className='w-auto md:w-[25%] p-2 bg-[#020101] text-white rounded-md'>
                <p className='text-lg font-bold h-10'>Berita Terkini</p>
                <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 className='m-2'>
                    <Button
                        className='w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none'
                        radius='none'
                    >
                        Lihat Semua
                    </Button>
                </div>
            </div>
            <div className='w-auto md:w-[50%]'>
                <Card
                    isFooterBlurred
                    radius="lg"
                    className="border-none"
                >
                    <Image
                        alt="Woman listing to music"
                        className="object-cover"
                        height={660}
                        src="/headernews.png"
                        width={460}
                        layout="responsive"
                    />
                    <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
                        <div className='text-white'>
                            <p className='text-left font-semibold'>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
                            <p className='py-[2px] text-left text-sm'>21-07-2023 13:50</p>
                            <p className='flex items-center gap-1 text-sm'><EyeIcon />82</p>
                        </div>
                    </CardFooter>
                </Card>
            </div>
            <div className='w-auto md:w-[25%] p-2 rounded-md text-white dark:text-black '>
                <div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'>
                    <img src="/gprheader.png" alt="gpr" className='w-full' />
                </div>
                <div className='overflow-y-scroll h-[343px] border-5 border-blue-950 text-black'>
                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <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-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <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-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <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-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <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>
                <div className=' border-5 border-blue-950 rounded-bl-lg rounded-br-lg'>
                    <img src="/gprfooter.png" alt="gpr" className='w-full' />
                </div>
            </div>
        </div>
    )
}