122 lines
5.0 KiB
TypeScript
122 lines
5.0 KiB
TypeScript
import React from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
const announcements = [
|
|
{
|
|
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",
|
|
},
|
|
];
|
|
|
|
const AnnouncementSection = () => {
|
|
return (
|
|
<section className="container max-w-7xl py-8 px-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-2xl font-bold text-green-800">
|
|
Pengumuman
|
|
</h2>
|
|
<Button variant="link" className="text-green-700">
|
|
Selengkapnya
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Highlight Announcement */}
|
|
<div className="grid grid-cols-1 gap-6 mb-8">
|
|
<Card className="p-4 flex flex-col md:flex-row items-start">
|
|
<img
|
|
src={announcements[0].image}
|
|
alt={announcements[0].alt_image}
|
|
className="rounded-md w-full md:w-1/2"
|
|
/>
|
|
<CardContent className="p-4 w-full md:w-1/2">
|
|
<Badge className="bg-red-600 text-white">
|
|
{announcements[0].title_page}
|
|
</Badge>
|
|
<p className="text-gray-500 text-sm mt-2">
|
|
{announcements[0].date}
|
|
</p>
|
|
<h3 className="text-lg font-semibold mt-2 text-gray-900">
|
|
{announcements[0].title}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 mt-2">
|
|
{announcements[0].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>
|
|
|
|
{/* List of Announcements */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{announcements.map((item) => (
|
|
<Card key={item.id} className="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>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default AnnouncementSection;
|