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

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";
import { Link } from "@inertiajs/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",
//     },
// ];

interface SubKategori {
    SubKategoriId: number;
    NamaSubKategori: string;
}

interface Kategori {
    KategoriId: number;
    NamaKategori: string;
}

interface Post {
    PostId: number;
    JudulPost: string;
    DescPost: string;
    SlugPost: string;
    ImagePost: string;
    IsPublish: boolean;
    created_at: string;
    kategori?: Kategori;
    subkategori?: SubKategori;
}

interface CardPengumumanProps {
    posts: Post[];
}

const CardPengumuman = ({ posts }: CardPengumumanProps) => {
    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">
                {posts.map((post) => (
                    <Card key={post.PostId} className="md:p-4">
                        <img
                            src={`/storage/${post.ImagePost}`}
                            alt={post.JudulPost}
                            className="rounded-md"
                        />
                        <CardContent className="p-4">
                            <Badge className="bg-red-600 text-white">
                                {post.kategori?.NamaKategori} |{" "}
                                {post.subkategori?.NamaSubKategori}
                            </Badge>
                            <p className="text-gray-500 text-sm mt-2">
                                {new Date(post.created_at).toLocaleDateString(
                                    "id-ID",
                                    {
                                        day: "numeric",
                                        month: "long",
                                        year: "numeric",
                                    }
                                )}
                            </p>
                            <h3 className="text-md font-semibold mt-2 text-gray-900">
                                {post.JudulPost}
                            </h3>
                            <p className="text-sm text-gray-600 mt-2">
                                {post.DescPost.replace(/<[^>]*>/g, "")}
                            </p>
                            <Link href={`/post/${post.SlugPost}`}>
                                <Button
                                    variant="link"
                                    className="text-red-600 mt-2 pl-0"
                                >
                                    Baca Selengkapnya{" "}
                                    <ArrowRight className="ml-2 w-4 h-4" />
                                </Button>
                            </Link>
                        </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;