kontenhumas-fe/components/main/publication-filter.tsx

80 lines
2.4 KiB
TypeScript

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ThumbsUp, ThumbsDown } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
type PublikasiCardProps = {
id: number;
image: string;
label: string;
category: string;
date: string;
title: string;
description: string;
};
export default function PublicationKlFilter({
id,
image,
label,
category,
date,
title,
description,
}: PublikasiCardProps) {
return (
<Card className="overflow-hidden shadow-md w-[315px] h-[417px] p-0 flex flex-col">
{/* Gambar atas */}
<Link href={`/content/video/detail/${id}`}>
<div className="relative w-full h-[250px]">
<Image src={image} alt={title} fill className="object-cover" />
</div>
<CardContent className="px-4 space-y-2 flex-grow">
<div className="flex flex-wrap gap-2 text-xs font-semibold mt-2">
<span
className={`px-2 py-1 rounded text-white ${
label === "POLRI"
? "bg-red-600"
: label === "MPR"
? "bg-[#DDBF00]"
: label === "DPR"
? "bg-[#EFBC2F]"
: label === "KPK"
? "bg-[#FE0000]"
: label === "PUPR"
? "bg-[#030F6B]"
: label === "MAHKAMAH AGUNG"
? "bg-[#FFC928]"
: label === "KEJAKSAAN AGUNG"
? "bg-green-600"
: "bg-gray-400"
}`}
>
{label}
</span>
<span className="text-gray-600">{category}</span>
</div>
<p className="text-xs text-gray-500">{date}</p>
<h3 className="text-sm font-semibold line-clamp-2">{title}</h3>
<p className="text-sm text-gray-600 line-clamp-2">{description}</p>
<div className="flex justify-between items-center mt-2">
<div className="flex items-center gap-3 text-muted-foreground">
<ThumbsUp className="w-4 h-4 cursor-pointer" />
<ThumbsDown className="w-4 h-4 cursor-pointer" />
</div>
<Button
size="sm"
variant="outline"
className="bg-[#3665FF] text-white"
>
Save
</Button>
</div>
</CardContent>
</Link>
</Card>
);
}