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

import { Button, Card, CardBody, CardFooter, Image, Tab, Tabs } from '@nextui-org/react';
import React, { useEffect, useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { Navigation, Pagination } from 'swiper/modules';
import { top5NewsMediahub } from '@/service/medol-news-update';
import Link from 'next/link';

export default function MedolUpdate() {
    const [mediahubUpdate, setMediahubUpdate] = useState<any>();

    useEffect(() => {
        async function getMedihubUpdate() {
            const res = await top5NewsMediahub();
            setMediahubUpdate(res.data?.data?.content);
            // console.log("List Top5News", res.data.data?.content);
        }

        getMedihubUpdate()
    }, []);

    const mediaHubUpdate = [
        {
            id: 1,
            image: '/temp/mediahub1.png',
            title: 'Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan',
            createdDate: '12 Januari 2024',
            time: '13:00 WITA'
        },
        {
            id: 2,
            image: '/temp/mediahub2.png',
            title: 'Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak',
            createdDate: '14 Januari 2024',
            time: '13:00 WIB'
        },
        {
            id: 3,
            image: '/temp/mediahub2.png',
            title: 'Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak',
            createdDate: '14 Januari 2024',
            time: '13:00 WIB'
        },
        {
            id: 4,
            image: '/temp/mediahub2.png',
            title: 'Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak',
            createdDate: '14 Januari 2024',
            time: '13:00 WIB'
        },
        {
            id: 5,
            image: '/temp/mediahub2.png',
            title: 'Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak',
            createdDate: '14 Januari 2024',
            time: '13:00 WIB'
        },
    ]

    return (
        <div className='border-2 rounded-lg py-2'>
            <div className='text-2xl font-semibold underline underline-offset-4 text-center decoration-red-600 '>
                Top 5 News Update
            </div>
            <div className='bg-white text-black p-1 md:p-5 space-y-5'>
                <Tabs
                    classNames={{
                        tabList: "bg-white shadow-lg border",
                        tabContent: 'group-data-[selected=true]:text-[white] text-warning'
                    }}
                    aria-label="Options" color='warning' className='flex justify-center'>
                    <Tab key="mediahub" title="MediaHUB Update">
                        <Swiper
                            navigation={true}
                            modules={[Navigation, Pagination]}
                            spaceBetween={40}
                            slidesPerView={2}
                            pagination={true}
                            className="mySwiper">
                            {mediahubUpdate?.map((newsItem: any) => (
                                <SwiperSlide>
                                    <Link href={newsItem?.pageUrl} target='_blank'>
                                        <Card isPressable shadow="sm" className=' bg-white text-black border-2'>
                                            <CardBody className="overflow-visible p-0">
                                                <Image
                                                    radius="lg"
                                                    width="300%"
                                                    alt="tes"
                                                    className="object-cover h-[270px]"
                                                    src={newsItem.thumbnailLink}
                                                />
                                            </CardBody>
                                            <CardFooter className="flex flex-col items-start text-left">
                                                <p className='text-xs'>02-04-2024 09:31 WITA</p>
                                                <b className=''>{newsItem?.title}</b>
                                            </CardFooter>
                                        </Card>
                                    </Link>
                                </SwiperSlide>
                            ))}
                        </Swiper>
                        <div className='text-center pt-6'>
                            <Button
                                className='bg-white text-[#DD8306] font-bold w-56'
                                size='sm'
                                color='warning'
                                variant='bordered'

                            >
                                Lihat Lebih Banyak
                            </Button>
                        </div>
                    </Tab>
                    <Tab key="tbnews" title="Tribrata News Update">
                        <div className='flex gap-5  justify-center pt-3'>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="300%"
                                        alt="tes"
                                        className="object-cover h-[270px]"
                                        src='/temp/mediahub1.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:31 WITA</p>
                                    <b className=''>Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan</b>
                                </CardFooter>
                            </Card>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="100%"
                                        alt="tes"
                                        className="w-full object-cover h-[270px]"
                                        src='/temp/mediahub2.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:16 WIB</p>
                                    <b>Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak</b>
                                </CardFooter>
                            </Card>
                        </div>
                        <div className='text-center pt-6'>
                            <Button
                                className='bg-white text-[#DD8306] font-bold w-56'
                                size='sm'
                                color='warning'
                                variant='bordered'

                            >
                                Lihat Lebih Banyak
                            </Button>
                        </div>
                    </Tab>
                    <Tab key="inp" title="Indonesia Nasional Police Update">
                        <div className='flex gap-5  justify-center pt-3'>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="300%"
                                        alt="tes"
                                        className="object-cover h-[270px]"
                                        src='/temp/mediahub1.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:31 WITA</p>
                                    <b className=''>Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan</b>
                                </CardFooter>
                            </Card>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="100%"
                                        alt="tes"
                                        className="w-full object-cover h-[270px]"
                                        src='/temp/mediahub2.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:16 WIB</p>
                                    <b>Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak</b>
                                </CardFooter>
                            </Card>
                        </div>
                        <div className='text-center pt-6'>
                            <Button
                                className='bg-white text-[#DD8306] font-bold w-56'
                                size='sm'
                                color='warning'
                                variant='bordered'

                            >
                                Lihat Lebih Banyak
                            </Button>
                        </div>
                    </Tab>
                    <Tab key="polritv" title="Polri TV Update">
                        <div className='flex gap-5  justify-center pt-3'>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="300%"
                                        alt="tes"
                                        className="object-cover h-[270px]"
                                        src='/temp/mediahub1.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:31 WITA</p>
                                    <b className=''>Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan</b>
                                </CardFooter>
                            </Card>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="100%"
                                        alt="tes"
                                        className="w-full object-cover h-[270px]"
                                        src='/temp/mediahub2.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:16 WIB</p>
                                    <b>Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak</b>
                                </CardFooter>
                            </Card>
                        </div>
                        <div className='text-center pt-6'>
                            <Button
                                className='bg-white text-[#DD8306] font-bold w-56'
                                size='sm'
                                color='warning'
                                variant='bordered'

                            >
                                Lihat Lebih Banyak
                            </Button>
                        </div>
                    </Tab>
                </Tabs>
            </div>
        </div>
    )
}