web-humas-fe/components/landing/campaign.tsx

'use client'
import { Button } from '@nextui-org/button'
import { Card, CardBody, CardFooter, Image } from '@nextui-org/react'
import Slider from 'react-slick'
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Link from 'next/link';

export default function Campaign() {
    const settings = {
        dots: true,
        infinite: false,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
    };

    const dummyData = [
        {
            id: 1,
            date: '03/01/2024 14:30 WIB',
            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
            imageUrl: '/vm1.jpg',
            link: '/link1',
        },
        {
            id: 2,
            date: '03/02/2024 15:45 WIB',
            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
            imageUrl: '/vm1.jpg',
            link: '/link2',
        },
        {
            id: 3,
            date: '03/02/2024 15:45 WIB',
            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
            imageUrl: '/vm1.jpg',
            link: '/link2',
        },
        // {
        //     id: 4,
        //     date: '03/04/2024 17:30 WIB',
        //     title: 'Judul Artikel 4',
        //     imageUrl: '/vm4.jpg',
        //     link: '/link4',
        // },
        // {
        //     id: 5,
        //     date: '03/05/2024 18:45 WIB',
        //     title: 'Judul Artikel 5',
        //     imageUrl: '/vm5.jpg',
        //     link: '/link5',
        // },
    ];

    return (
        <div className='h-screen'>
            <p className='text-3xl font-bold text-center text-[#FF3900] pt-10'>Kampanye Daerah</p>
            <div className='pt-10'>
                <div className='flex justify-center gap-4 h-full'>
                    {dummyData.map((data) => (
                        <Card key={data.id} className='w-[250px] items-center rounded-lg'>
                            <CardBody>
                                <Image
                                    alt='visimisi'
                                    className='rounded-lg object-fill'
                                    src={data.imageUrl}

                                />
                            </CardBody>
                            <CardFooter >
                                <div className='px-3 pb-2 text-left w-full h-full'>
                                    <p className='text-xs'>{data.date}</p>
                                    <p className='leading-tight text-sm font-semibold'>{data.title}</p>
                                    <Link href={`campaign/detail/${data.id}`}>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkapnya</p>
                                    </Link>
                                </div>
                            </CardFooter>
                        </Card>
                    ))}



                    {/* <Card className='max-h-max w-[250px] items-center rounded-lg'>
                            <CardBody>
                                <Image
                                    alt='visimisi'
                                    className='rounded-lg'
                                    src="/vm1.jpg"
                                    height={150}
                                    width={220}
                                />
                            </CardBody>
                            <div className='px-3 pb-2'>
                                <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                            </div>
                        </Card>
                        <Card className='max-h-max w-[250px] items-center rounded-lg'>
                            <CardBody>
                                <Image
                                    alt='visimisi'
                                    className='rounded-lg'
                                    src="/vm1.jpg"
                                    height={150}
                                    width={220}
                                />
                            </CardBody>
                            <div className='px-3 pb-2'>
                                <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                            </div>
                        </Card>
                        <Card className='max-h-max w-[250px] items-center rounded-lg'>
                            <CardBody>
                                <Image
                                    alt='visimisi'
                                    className='rounded-lg'
                                    src="/vm1.jpg"
                                    height={150}
                                    width={220}
                                />
                            </CardBody>
                            <div className='px-3 pb-2'>
                                <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                            </div>
                        </Card> */}
                </div>
                <div className='flex justify-center pt-5'>
                    <Button
                        className='text-[#FF3900] font-bold border-[#FF3900]'
                        variant='bordered'
                        radius='full'
                    >
                        Lihat Selengkapnya
                    </Button>
                </div>
            </div>

            {/* <div className='border-2 border-green-600 container mx-auto'>
                <h2> Single Item</h2>
                <Slider {...settings}>
                    <div>
                        <h3>1</h3>
                    </div>
                    <div>
                        <h3>2</h3>
                    </div>
                    <div>
                        <h3>3</h3>
                    </div>
                    <div>
                        <h3>4</h3>
                    </div>
                    <div>
                        <h3>5</h3>
                    </div>
                    <div>
                        <h3>6</h3>
                    </div>
                </Slider>
            </div> */}
            {/* <div className='flex justify-start relative bottom-[135px] z-0 left-0 '>
                    <Image
                        alt='anisbaswedan'
                        className='rounded-lg'
                        src="/anis1.png"
                    />
                </div> */}
        </div>
    )
}