63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
|
import LoadingSpinner from "@/shared/components/loading-spinner";
|
||
|
|
import { CardContent, Card } from "@/shared/components/ui/card";
|
||
|
|
import { Mapset } from "@/shared/types/mapset";
|
||
|
|
import { Download, Eye } from "lucide-react";
|
||
|
|
import dynamic from "next/dynamic";
|
||
|
|
|
||
|
|
const PreviewMap = dynamic(() => import("@/shared/components/preview-map"), {
|
||
|
|
ssr: false,
|
||
|
|
loading: () => <LoadingSpinner />,
|
||
|
|
});
|
||
|
|
|
||
|
|
export function MainMapsetCard({ mapset }: Readonly<{ mapset: Mapset }>) {
|
||
|
|
return (
|
||
|
|
<Card className="font-onest h-full w-full overflow-hidden p-0">
|
||
|
|
<CardContent className="relative flex h-full flex-col p-0">
|
||
|
|
<div className="relative aspect-video w-full">
|
||
|
|
<PreviewMap mapset={mapset} />
|
||
|
|
</div>
|
||
|
|
<span className="absolute top-2 left-2 z-[1000] rounded-lg bg-[#FFD600] px-2 py-1 text-xs font-medium text-black">
|
||
|
|
{mapset?.category?.name}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<div className="flex flex-1 flex-col space-y-3 p-5">
|
||
|
|
<a href={`/maps?mapset-id=${mapset.id}`} rel="noopener noreferrer">
|
||
|
|
<h3 className="hover:text-primary md:text-md mb-0 line-clamp-4 text-base font-medium sm:text-lg lg:line-clamp-2 lg:text-lg xl:line-clamp-3 xl:text-lg">
|
||
|
|
{mapset.name}
|
||
|
|
</h3>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div className="mt-auto pt-2">
|
||
|
|
<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>{mapset.view_count}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Download className="h-4 w-4" />
|
||
|
|
<span>{mapset.download_count}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/* <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>
|
||
|
|
);
|
||
|
|
}
|