56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Card, CardContent } from "@/shared/components/ui/card";
|
||
|
|
import { News } from "@/shared/types/news";
|
||
|
|
import { ArrowRight } from "lucide-react";
|
||
|
|
import Link from "next/link";
|
||
|
|
import DOMPurify from "dompurify";
|
||
|
|
|
||
|
|
function truncateHtml(html: string, maxLength: number): string {
|
||
|
|
const tempEl = document.createElement("div");
|
||
|
|
tempEl.innerHTML = html;
|
||
|
|
const textContent = tempEl.textContent || "";
|
||
|
|
return textContent.length > maxLength
|
||
|
|
? textContent.slice(0, maxLength) + "..."
|
||
|
|
: textContent;
|
||
|
|
}
|
||
|
|
|
||
|
|
type Props = { news: News };
|
||
|
|
export function NewsSecondaryCard({ news }: Props) {
|
||
|
|
const safeHtml = DOMPurify.sanitize(truncateHtml(news.description, 300));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Card className="font-onest h-full w-full overflow-hidden p-0">
|
||
|
|
<CardContent className="flex h-full flex-col p-0">
|
||
|
|
<div className="flex flex-1 flex-col space-y-3 p-5">
|
||
|
|
{/* <div className="mb-8 flex items-center justify-between">
|
||
|
|
<span className="bg-biru-150 text-biru-500 rounded-full px-4 py-1 text-xs font-medium">
|
||
|
|
Pengumuman
|
||
|
|
</span>
|
||
|
|
<div className="text-dark-300 flex items-center text-sm">
|
||
|
|
<Calendar size={14} />
|
||
|
|
<p className="ms-1 mb-0">12 Oktober 2025</p>
|
||
|
|
</div>
|
||
|
|
</div> */}
|
||
|
|
<h3 className="md:text-md mb-2 line-clamp-4 text-base font-medium sm:text-lg lg:line-clamp-2 lg:text-lg xl:line-clamp-3 xl:text-lg">
|
||
|
|
{news.name}
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
className="text-dark-300 mb-8 text-sm"
|
||
|
|
dangerouslySetInnerHTML={{ __html: safeHtml }}
|
||
|
|
></p>
|
||
|
|
|
||
|
|
<Link
|
||
|
|
href={`/news/${news.id}`}
|
||
|
|
className="text-primary hover:text-biru-300 flex items-center text-sm"
|
||
|
|
>
|
||
|
|
Baca selengkapnya <ArrowRight size={14} className="ml-1" />
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|