50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import { getFileThumbnailUrl } from "@/shared/utils/file";
|
|
import { ArrowRight } from "lucide-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export default function OrganizationCard({
|
|
name,
|
|
link,
|
|
totalDataset,
|
|
icon,
|
|
}: Readonly<{
|
|
name: string;
|
|
link: string;
|
|
totalDataset: number;
|
|
icon: string;
|
|
}>) {
|
|
return (
|
|
<Link
|
|
href={link}
|
|
className="group font-onest transition-border hover:border-primary flex h-full flex-col justify-between gap-4 rounded-xl border border-[#94A3B8] p-6 ease-in-out hover:cursor-pointer hover:border-2"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="relative h-28 w-28 shrink-0">
|
|
<Image
|
|
src={getFileThumbnailUrl(icon)}
|
|
alt="icon"
|
|
fill
|
|
sizes="64px"
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<ArrowRight
|
|
size={24}
|
|
className="group-hover:text-biru-300 text-gray-400 transition-colors duration-200"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<h3 className="text-base sm:text-sm font-medium line-clamp-3 min-h-[4.5rem]">
|
|
{name}
|
|
</h3>
|
|
|
|
<div className="text-md text-biru-300 font-semibold">
|
|
{totalDataset} Dataset
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|