75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
'use client'
|
|
import { Card, CardBody, CardFooter, Image } from '@nextui-org/react'
|
|
import Link from 'next/link';
|
|
import React from 'react'
|
|
|
|
export default function SimilarNews() {
|
|
|
|
const headlineData = [
|
|
{
|
|
id: 1,
|
|
date: '03/02/2024 15:45 WIB',
|
|
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
|
|
imageUrl: '/headline1.png',
|
|
link: '/link2',
|
|
},
|
|
{
|
|
id: 2,
|
|
date: '03/02/2024 15:45 WIB',
|
|
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
|
|
imageUrl: '/headline2.png',
|
|
link: '/link2',
|
|
},
|
|
{
|
|
id: 3,
|
|
date: '03/02/2024 15:45 WIB',
|
|
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
|
|
imageUrl: '/headline3.png',
|
|
link: '/link2',
|
|
},
|
|
{
|
|
id: 4,
|
|
date: '03/02/2024 15:45 WIB',
|
|
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
|
|
imageUrl: '/headline4.png',
|
|
link: '/link2',
|
|
},
|
|
{
|
|
id: 5,
|
|
date: '03/02/2024 15:45 WIB',
|
|
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
|
|
imageUrl: '/headline5.png',
|
|
link: '/link2',
|
|
},
|
|
|
|
];
|
|
return (
|
|
<div className='border-2 border-red py-10'>
|
|
<p className='text-center pb-10 text-3xl font-bold text-[#FF3900]'>Berita Serupa</p>
|
|
<div className="gap-2 grid grid-cols-2 sm:grid-cols-5 mx-auto md:mx-10">
|
|
{headlineData.map((item, index) => (
|
|
<Card shadow="sm" key={index}>
|
|
<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">
|
|
<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>
|
|
)
|
|
}
|