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

import { Button, Card, CardFooter, ScrollShadow } from '@nextui-org/react'
import Image from 'next/image'
import { EyeIcon } from '../icons'
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import { Pagination } from 'swiper/modules';
import Link from 'next/link';
import GPRKominfo from '../SocialMedia/GprKominfo';

export default function HeaderNews() {
    const newsData = [
        {
            id: 1,
            title: 'Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari',
            date: '21-07-2023 13:50',
            views: 82,
            imageUrl: '/headernews.png'
        },
        {
            id: 2,
            title: 'Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari',
            date: '21-07-2023 13:50',
            views: 82,
            imageUrl: '/headernews.png'
        },
    ];
    return (
        <div className='lg:flex items-center  bg-white gap-3 p-2'>
            <div className='w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md'>
                <p className='text-lg font-bold h-10 text-center'>Berita Terkini</p>
                <ScrollShadow hideScrollBar className=" h-[443px]">
                    <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 lg:w-[50%]'>
                <div>
                    <Swiper pagination={true} modules={[Pagination]} className="mySwiper">
                        {newsData.map((newsItem) => (
                            <SwiperSlide key={newsItem.id}>
                                <Card
                                    isFooterBlurred
                                    radius="lg"
                                    className="border-none"
                                >
                                    <Image
                                        alt="headernews"
                                        className="object-cover"
                                        height={660}
                                        src={newsItem.imageUrl}
                                        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'>
                                            <Link href={`news/detail/${newsItem.id}`}>
                                                <p className='text-left font-semibold'>{newsItem.title}</p>
                                            </Link>
                                            <p className='py-[2px] text-left text-sm'>{newsItem.date}</p>
                                            <p className='flex items-center gap-1 text-sm'><EyeIcon />{newsItem.views}</p>
                                        </div>
                                    </CardFooter>
                                </Card>
                            </SwiperSlide>
                        ))}
                    </Swiper>
                </div>
                {/* <Card
                    isFooterBlurred
                    radius="lg"
                    className="border-none"
                >
                    <Image
                        alt="headernews"
                        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 lg:w-[25%] p-2 rounded-md text-white dark:text-black '>
                <GPRKominfo />
                {/* <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>
    )
}