skl/resources/js/components/Card/CardPengumuman.tsx

116 lines
4.7 KiB
TypeScript

import React from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { ArrowRight } from "lucide-react";
const pengumumans = [
{
id: 1,
title_page: "Pengumuman",
alt_image: "Pengumuman",
date: "16 Januari 2025",
title: "Pelatihan & Sertifikasi Online Bidang Pengendalian Pencemaran Air Dan Udara",
description:
"Kegiatan Pelatihan Dan Uji Sertifikasi Tersebut Akan Diselenggarakan Sebagaimana Jadwal Terlampir, Kegiatan Tersebut Bekerjasama Dengan Lembaga P...",
image: "/assets/img1.jpg",
},
{
id: 2,
title_page: "Pengumuman",
alt_image: "Pengumuman",
date: "12 Desember 2024",
title: "Pembinaan Pelaporan secara Online Pengelolaan Lingkungan melalui situs Status Ketaatan Lingkungan (SKL)",
description:
"Sukolompok Pengawasan Lingkungan Bidang Pengawasan dan Penataan Hukum Dinas Lingkungan Hidup Prov. DKI Jakarta...",
image: "/assets/img1.jpg",
},
{
id: 3,
title_page: "Pengumuman",
alt_image: "Pengumuman",
date: "12 Desember 2024",
title: "Pembinaan Pelaporan secara Online Pengelolaan Lingkungan melalui situs Status Ketaatan Lingkungan (SKL)",
description:
"Sukolompok Pengawasan Lingkungan Bidang Pengawasan dan Penataan Hukum Dinas Lingkungan Hidup Prov. DKI Jakarta...",
image: "/assets/img1.jpg",
},
{
id: 4,
title_page: "Pengumuman",
alt_image: "Pengumuman",
date: "12 Desember 2024",
title: "Pembinaan Pelaporan secara Online Pengelolaan Lingkungan melalui situs Status Ketaatan Lingkungan (SKL)",
description:
"Sukolompok Pengawasan Lingkungan Bidang Pengawasan dan Penataan Hukum Dinas Lingkungan Hidup Prov. DKI Jakarta...",
image: "/assets/img1.jpg",
},
{
id: 5,
title_page: "Pengumuman",
alt_image: "Pengumuman",
date: "12 Desember 2024",
title: "Pembinaan Pelaporan secara Online Pengelolaan Lingkungan melalui situs Status Ketaatan Lingkungan (SKL)",
description:
"Sukolompok Pengawasan Lingkungan Bidang Pengawasan dan Penataan Hukum Dinas Lingkungan Hidup Prov. DKI Jakarta...",
image: "/assets/img1.jpg",
},
{
id: 6,
title_page: "Pengumuman",
alt_image: "Pengumuman",
date: "12 Desember 2024",
title: "Pembinaan Pelaporan secara Online Pengelolaan Lingkungan melalui situs Status Ketaatan Lingkungan (SKL)",
description:
"Sukolompok Pengawasan Lingkungan Bidang Pengawasan dan Penataan Hukum Dinas Lingkungan Hidup Prov. DKI Jakarta...",
image: "/assets/img1.jpg",
},
];
const CardPengumuman = () => {
return (
<section className="container max-w-7xl py-8 px-6">
{/* List of Announcements */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{pengumumans.map((item) => (
<Card key={item.id} className="md:p-4">
<img
src={item.image}
alt={item.alt_image}
className="rounded-md"
/>
<CardContent className="p-4">
<Badge className="bg-red-600 text-white">
{item.title_page}
</Badge>
<p className="text-gray-500 text-sm mt-2">
{item.date}
</p>
<h3 className="text-md font-semibold mt-2 text-gray-900">
{item.title}
</h3>
<p className="text-sm text-gray-600 mt-2">
{item.description}
</p>
<Button
variant="link"
className="text-red-600 mt-2 pl-0"
>
Baca Selengkapnya{" "}
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</CardContent>
</Card>
))}
</div>
<div className="flex justify-center mt-8">
<Button variant="link" className="text-green-700">
Lihat Lebih Banyak
</Button>
</div>
</section>
);
};
export default CardPengumuman;