83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
|
import { Card, CardContent } from "@/shared/components/ui/card";
|
||
|
|
import { News } from "@/shared/types/news";
|
||
|
|
import { ArrowRight } from "lucide-react";
|
||
|
|
import Image from "next/image";
|
||
|
|
import Link from "next/link";
|
||
|
|
|
||
|
|
type Props = { news: News };
|
||
|
|
export function NewsMainCard({ news }: Props) {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Card className="font-onest h-full w-full overflow-hidden p-0">
|
||
|
|
<CardContent className="flex h-full flex-col p-0">
|
||
|
|
<div className="relative aspect-[21/9] w-full">
|
||
|
|
<Image
|
||
|
|
src={news.thumbnail ?? "/landing/placeholder.webp"}
|
||
|
|
alt="thumbnail"
|
||
|
|
fill
|
||
|
|
className="rounded-t-md object-cover"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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">
|
||
|
|
{news.}
|
||
|
|
</span>
|
||
|
|
<div className="text-dark-300 flex items-center text-sm">
|
||
|
|
<Calendar size={14} />
|
||
|
|
<p className="ms-1 mb-0">{dateLabel}</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">{news.description}</p>
|
||
|
|
|
||
|
|
<div className="mt-auto">
|
||
|
|
<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>
|
||
|
|
{/* <a
|
||
|
|
href={`/maps?mapset-id=${mapset.id}`}
|
||
|
|
className="text-primary inline-flex items-center hover:underline"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
>
|
||
|
|
<div className="flex w-full items-center justify-between gap-4 text-zinc-500">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Eye className="h-4 w-4" />
|
||
|
|
<span>2.450</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Download className="h-4 w-4" />
|
||
|
|
<span>892</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a> */}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
{/* <div className="font-onest relative h-full overflow-hidden rounded-2xl lg:col-span-2 lg:row-span-2">
|
||
|
|
<Image
|
||
|
|
src={"/landing/hero.webp"}
|
||
|
|
alt="thumbnail"
|
||
|
|
fill
|
||
|
|
className="rounded-t-md object-cover"
|
||
|
|
/>
|
||
|
|
<div className="flex flex-col p-0">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span className="bg-biru-150 text-biru-500 rounded-full">
|
||
|
|
Pengumuman
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div> */}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|