web-humas-fe/components/page/RelatedNews.tsx

65 lines
2.8 KiB
TypeScript
Raw Normal View History

2024-02-19 08:39:35 +00:00
'use client'
import { Card, CardBody, CardFooter, Image } from '@nextui-org/react';
import React from 'react'
import { UnderLine } from '../icons';
export default function RelatedNews() {
const list = [
{
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/relatedNews.png",
desc: "$5.50",
},
{
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/headernews.png",
price: "$3.00",
},
{
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/relatedNews.png",
desc: "$5.50",
}, {
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/relatedNews.png",
desc: "$5.50",
},
{
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/headernews.png",
price: "$3.00",
},
];
return (
<div className='text-black flex flex-col items-center space-y-10 my-10'>
<div className='text-2xl font-bold flex flex-col items-center'>
<div>Kategori Satker</div>
<div><UnderLine /></div>
</div>
<div className='w-[90%] bg-white'>
<div className="gap-4 grid grid-cols-1 sm:grid-cols-5 w-full bg-white">
{list.map((item, index) => (
<Card className='bg-white text-black' shadow="sm" key={index} isPressable onPress={() => console.log("item pressed")}>
<CardBody className="overflow-visible p-2">
<Image
// shadow="sm"
radius="lg"
width="100%"
alt={item.title}
className="w-full object-cover h-[260px]"
src={item.img}
/>
<p className='text-xs pt-2 pl-1'>24/01/2024 14:08 WIB</p>
</CardBody>
<CardFooter className="text-small text-left p-1 flex flex-col items-start">
<b>{item.title}</b>
<p className='text-xs py-2 text-blue-700'>Lihat Selengkapnya</p>
</CardFooter>
</Card>
))}
</div>
</div>
</div>
)
}