web-humas-fe/components/page/related-news.tsx

81 lines
2.5 KiB
TypeScript

"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 my-10">
<div className="text-2xl font-bold flex flex-col items-center">
<div>Kategori Satker</div>
<div>
<UnderLine />
</div>
</div>
<div className="w-full bg-white rounded-lg">
<div className="gap-4 grid grid-cols-1 sm:grid-cols-5 w-full bg-white rounded-lg">
{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>
);
}