107 lines
3.8 KiB
TypeScript
107 lines
3.8 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";
|
|
import { Link } from "@inertiajs/react";
|
|
|
|
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 CardUndanganProps {
|
|
undangan: Post[];
|
|
}
|
|
|
|
const UndanganSection = ({ undangan }: CardUndanganProps) => {
|
|
return (
|
|
<section className="container max-w-7xl py-8 px-6">
|
|
<div className="flex items-center mb-6 justify-between">
|
|
<div className="flex flex-col">
|
|
<Badge className="bg-black inline-block w-fit text-white hover:bg-green-600 cursor-pointer">
|
|
Informasi
|
|
</Badge>
|
|
<h2 className="text-2xl font-bold text-green-800">
|
|
Undangan
|
|
</h2>
|
|
</div>
|
|
<Link href="/undangan">
|
|
<Button
|
|
variant="link"
|
|
className="text-green-700 mt-auto pl-0"
|
|
>
|
|
Selengkapnya
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* List of Announcements */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{undangan.map((item) => (
|
|
<Card key={item.PostId} className="md:p-4">
|
|
<img
|
|
src={`/storage/${item.ImagePost}`}
|
|
alt={item.JudulPost}
|
|
className="rounded-md"
|
|
/>
|
|
<CardContent className="p-4">
|
|
<Badge className="bg-red-600 text-white">
|
|
{item.kategori?.NamaKategori}
|
|
</Badge>
|
|
<p className="text-gray-500 text-sm mt-2">
|
|
{new Date(item.created_at).toLocaleDateString(
|
|
"id-ID",
|
|
{
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
}
|
|
)}
|
|
</p>
|
|
<h3 className="text-md font-semibold mt-2 text-gray-900">
|
|
{item.JudulPost}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 mt-2">
|
|
{item.DescPost.replace(/<[^>]*>/g, "").slice(
|
|
0,
|
|
160
|
|
)}
|
|
...
|
|
</p>
|
|
<Link href={`/undangan/${item.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>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default UndanganSection;
|