Template
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
|
|
interface CollectionImage {
|
|
url: string;
|
|
altText?: string | null;
|
|
}
|
|
|
|
interface Collection {
|
|
id: string;
|
|
title: string;
|
|
handle: string;
|
|
description?: string;
|
|
image?: CollectionImage | null;
|
|
}
|
|
|
|
interface CollectionCardProps {
|
|
collection: Collection;
|
|
}
|
|
|
|
const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
|
|
return (
|
|
<Link
|
|
href={`/collections/${collection.handle}`}
|
|
className="group block h-full"
|
|
>
|
|
{/* Collection Image */}
|
|
<div className="relative aspect-square overflow-hidden">
|
|
{collection.image ? (
|
|
<img
|
|
src={collection.image.url}
|
|
alt={collection.image.altText || collection.title}
|
|
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.04]"
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 flex items-center justify-center text-zinc-300">
|
|
<i className="ri-folder-line text-8xl"></i>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Collection Info */}
|
|
<div className="flex flex-col flex-1 py-2.5">
|
|
<h3 className="text-sm font-medium text-foreground line-clamp-1">
|
|
{collection.title}
|
|
</h3>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default CollectionCard;
|