83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import ArticleThumbnail from "@/components/landing-page/article-thumbnail";
|
|
import type { PublicArticle } from "@/lib/articles-public";
|
|
|
|
const BADGE_COLORS = [
|
|
"bg-red-600",
|
|
"bg-yellow-500",
|
|
"bg-yellow-600",
|
|
"bg-[#0f3b63]",
|
|
];
|
|
|
|
function firstTag(tags: string | undefined): string {
|
|
if (!tags?.trim()) return "";
|
|
const t = tags
|
|
.split(",")
|
|
.map((s) => s.trim())
|
|
.filter(Boolean)[0];
|
|
return t ?? "";
|
|
}
|
|
|
|
export function articleDetailHref(a: PublicArticle) {
|
|
return `/news/detail/${a.id}-${a.slug}`;
|
|
}
|
|
|
|
type Props = {
|
|
article: PublicArticle;
|
|
};
|
|
|
|
export default function PublicArticleCard({ article }: Props) {
|
|
const badgeClass = BADGE_COLORS[article.id % BADGE_COLORS.length];
|
|
const category = article.categoryName?.trim() || "Berita";
|
|
const tag = firstTag(article.tags);
|
|
const dateSrc = article.publishedAt || article.createdAt;
|
|
const dateLabel =
|
|
typeof dateSrc === "string"
|
|
? new Date(dateSrc).toLocaleDateString("id-ID", {
|
|
day: "2-digit",
|
|
month: "long",
|
|
year: "numeric",
|
|
})
|
|
: "";
|
|
|
|
return (
|
|
<Link
|
|
href={articleDetailHref(article)}
|
|
className="block overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm transition duration-300 hover:shadow-md"
|
|
>
|
|
<div className="relative h-[200px] w-full">
|
|
<ArticleThumbnail
|
|
src={article.thumbnailUrl}
|
|
alt={article.title}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-3 p-5">
|
|
<div className="flex flex-wrap items-center gap-2 text-xs">
|
|
<span
|
|
className={`rounded-md px-2 py-[3px] font-medium text-white ${badgeClass}`}
|
|
>
|
|
{category}
|
|
</span>
|
|
{tag ? (
|
|
<span className="uppercase tracking-wide text-gray-500">{tag}</span>
|
|
) : null}
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-400">{dateLabel}</p>
|
|
|
|
<h3 className="line-clamp-2 text-[15px] font-semibold leading-snug transition hover:text-[#966314]">
|
|
{article.title}
|
|
</h3>
|
|
|
|
<p className="line-clamp-2 text-sm leading-relaxed text-gray-500">
|
|
{article.description}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|