51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useCardImage, type ArtistCardProps } from "./ArtistCard";
|
|
|
|
export function ArtistCardCompact({
|
|
name,
|
|
subtitle,
|
|
image,
|
|
href,
|
|
label = "Artist",
|
|
className = "",
|
|
}: ArtistCardProps) {
|
|
const { src, onError } = useCardImage(image);
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={[
|
|
"group relative z-10 flex h-16 items-center overflow-hidden rounded-lg bg-lightbg shadow-lg ring-1 ring-lightline dark:bg-darkbg dark:ring-darkline",
|
|
"hover:text-trptkblue hover:ring-lightline-hover dark:hover:text-white dark:hover:ring-darkline-hover",
|
|
"transition-color duration-300 ease-in-out",
|
|
className,
|
|
].join(" ")}
|
|
aria-label={name ? `${label}: ${name}` : label}
|
|
>
|
|
<div className="relative aspect-square h-full shrink-0">
|
|
<Image
|
|
src={src}
|
|
alt={name ? `Photo of ${name}` : `${label} photo`}
|
|
fill
|
|
sizes="96px"
|
|
className="rounded-lg object-cover"
|
|
onError={onError}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex min-w-0 flex-1 flex-col justify-center p-3">
|
|
<h3 className="truncate text-sm leading-snug">
|
|
{name ?? `Untitled ${label.toLowerCase()}`}
|
|
</h3>
|
|
{subtitle && (
|
|
<h4 className="mt-1 truncate text-xs leading-relaxed text-lightsec dark:text-darksec">
|
|
{subtitle}
|
|
</h4>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|