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

import { Button, Card, CardBody, CardFooter, Image, Tab, Tabs } from '@nextui-org/react';
import React 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';

export default function MedolUpdate() {

    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) => (
                                <SwiperSlide>
                                    <Card 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.image}
                                            />
                                        </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>
                                </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>
    )
}