127 lines
4.4 KiB
TypeScript
127 lines
4.4 KiB
TypeScript
'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: '/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',
|
|
},
|
|
// {
|
|
// 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='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) => (
|
|
<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>
|
|
))}
|
|
</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>
|
|
)
|
|
}
|