Entity Image

1"use client"
2 
3import { useState } from "react"
4import { cn } from "@/lib/utils"
5 
6export interface EntityImageProps {
7  src?: string | null
8  /** Used for the alt text and the initials fallback. */
9  name: string
10  size?: "sm" | "default" | "lg"
11  className?: string
12}
13 
14const sizeClass: Record<NonNullable<EntityImageProps["size"]>, string> = {
15  sm: "size-5",
16  default: "size-8",
17  lg: "size-10",
18}
19 
20/**
21 * Just the image: no background, border, or corner radius, so team crests
22 * and region flags render at their native shape. Pass a `className` (e.g.
23 * `size-6`) to override the size; it takes precedence over `size`.
24 */
25export function EntityImage({ src, name, size = "default", className }: EntityImageProps) {
26  const [errored, setErrored] = useState(false)
27 
28  if (!src || errored) {
29    return (
30      <span
31        className={cn(
32          "flex shrink-0 items-center justify-center rounded-full bg-muted text-[0.6rem] font-medium text-muted-foreground",
33          sizeClass[size],
34          className
35        )}
36      >
37        {name.slice(0, 2).toUpperCase()}
38      </span>
39    )
40  }
41 
42  return (
43    // eslint-disable-next-line @next/next/no-img-element -- framework-agnostic registry component, no next/image dependency
44    <img
45      src={src}
46      alt={name}
47      className={cn("shrink-0 object-contain", sizeClass[size], className)}
48      onError={() => setErrored(true)}
49    />
50  )
51}