spb/rareindex

1import { imageProps } from '@/lib/images';2import { cn } from '@/lib/format';3import { SmartImage } from './smart-image';4import { glyphForFamily } from '@/lib/image-glyph';56/**7 * Server component: turns a third-party URL into cached /img sources and renders the client8 * <SmartImage> with an explicit aspect ratio (no layout shift) and a category placeholder.9 */10export function aspectForFamily(familySlug: string | null | undefined): string {11  return familySlug === 'trading_cards' || familySlug === 'sports_cards' || familySlug === 'comics' || familySlug === 'manga' || familySlug === 'books' ? 'aspect-[4/5]' : 'aspect-square';12}1314export function TileImage({15  src,16  alt,17  familySlug,18  label,19  sizes = '(min-width: 1280px) 200px, (min-width: 768px) 25vw, 45vw',20  maxWidth = 384,21  priority = false,22  fit = 'contain',23  padded = true,24  className,25  imgClassName,26}: {27  src: string | null | undefined;28  alt: string;29  familySlug: string | null | undefined;30  label?: string | null;31  sizes?: string;32  maxWidth?: number;33  priority?: boolean;34  fit?: 'contain' | 'cover';35  padded?: boolean;36  className?: string;37  imgClassName?: string;38}) {39  const props = imageProps(src, { maxWidth });40  return (41    <span className={cn('relative block w-full overflow-hidden rounded-[5px] bg-sunken', aspectForFamily(familySlug), className)}>42      <SmartImage43        src={props?.src ?? null}44        srcSet={props?.srcSet ?? null}45        sizes={sizes}46        alt={alt}47        fit={fit}48        priority={priority}49        imgClassName={cn(padded ? 'p-2' : '', 'transition-transform duration-300 ease-out group-hover:scale-[1.03]', imgClassName)}50        placeholder={{ label: label ?? null, glyph: glyphForFamily(familySlug) }}51      />52    </span>53  );54}5556/** Square thumbnail for tables and dense rows. */57export function Thumb({ src, alt, size = 40, familySlug, className, rounded = 'rounded-sm', fit = 'cover' }: { src: string | null | undefined; alt: string; size?: number; familySlug?: string | null; className?: string; rounded?: string; fit?: 'contain' | 'cover' }) {58  const props = imageProps(src, { maxWidth: Math.max(96, size * 2) });59  return (60    <span className={cn('relative inline-block shrink-0 overflow-hidden bg-inset', rounded, className)} style={{ width: size, height: size }}>61      <SmartImage src={props?.src ?? null} srcSet={props?.srcSet ?? null} sizes={`${size}px`} alt={alt} fit={fit} compact placeholder={{ glyph: glyphForFamily(familySlug) }} />62    </span>63  );64}65