83 lines
3.2 KiB
TypeScript
83 lines
3.2 KiB
TypeScript
'use client'
|
|
import { Button } from '@nextui-org/button';
|
|
import { Card, CardBody, CardFooter, Image } from '@nextui-org/react';
|
|
import Link from 'next/link';
|
|
import "slick-carousel/slick/slick-theme.css";
|
|
import "slick-carousel/slick/slick.css";
|
|
|
|
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: '/kampanye1.png',
|
|
link: '/link1',
|
|
},
|
|
{
|
|
id: 2,
|
|
date: '03/02/2024 15:45 WIB',
|
|
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
|
|
imageUrl: '/kampanye2.png',
|
|
link: '/link2',
|
|
},
|
|
{
|
|
id: 3,
|
|
date: '03/02/2024 15:45 WIB',
|
|
title: 'MNC Penyelenggara Debat C',
|
|
imageUrl: '/kampanye3.png',
|
|
link: '/link2',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className='py-10'>
|
|
<p className='text-3xl font-bold text-center text-[#FF3900] pt-10'>Kampanye Daerah</p>
|
|
<div className='pt-10'>
|
|
<div className='flex flex-wrap justify-center gap-4 h-full'>
|
|
{dummyData.map((item, index) => (
|
|
<Link href={`headline/detail/${item.id}`}>
|
|
<Card shadow="sm" key={index} className='w-[280px]'>
|
|
<CardBody className="overflow-visible p-0">
|
|
<Image
|
|
shadow="sm"
|
|
radius="lg"
|
|
width="100%"
|
|
alt={item.title}
|
|
className="w-full object-cover "
|
|
src={item.imageUrl}
|
|
/>
|
|
</CardBody>
|
|
<CardFooter className="text-small text-left flex flex-col items-start border-2 h-full">
|
|
<div >{item.date}</div>
|
|
<div className='font-bold'>{item.title}</div>
|
|
<Link href={`/headline/detail/${item.id}`}>
|
|
<p className='font-semibold text-[#1A328E]'>Lihat Selengkapnya</p>
|
|
</Link>
|
|
</CardFooter>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</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>
|
|
)
|
|
}
|