ItemImage() — ui Function Reference

Architecture documentation for the ItemImage() function in item-image.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ItemImage() — ui Function Reference

Dependency Diagram

graph TD
  c034ff7f_a050_8ed0_d8d6_4c3b9663d136["ItemImage()"]
  1ce60d12_db2c_0ff0_2a9e_f4e9eb0da150["item-image.tsx"]
  c034ff7f_a050_8ed0_d8d6_4c3b9663d136 -->|defined in| 1ce60d12_db2c_0ff0_2a9e_f4e9eb0da150
  style c034ff7f_a050_8ed0_d8d6_4c3b9663d136 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/item-image.tsx lines 33–65

export default function ItemImage() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <ItemGroup className="gap-4">
        {music.map((song) => (
          <Item key={song.title} variant="outline" asChild role="listitem">
            <a href="#">
              <ItemMedia variant="image">
                <Image
                  src={`https://avatar.vercel.sh/${song.title}`}
                  alt={song.title}
                  width={32}
                  height={32}
                  className="object-cover grayscale"
                />
              </ItemMedia>
              <ItemContent>
                <ItemTitle className="line-clamp-1">
                  {song.title} -{" "}
                  <span className="text-muted-foreground">{song.album}</span>
                </ItemTitle>
                <ItemDescription>{song.artist}</ItemDescription>
              </ItemContent>
              <ItemContent className="flex-none text-center">
                <ItemDescription>{song.duration}</ItemDescription>
              </ItemContent>
            </a>
          </Item>
        ))}
      </ItemGroup>
    </div>
  )
}