ItemImage() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ItemImage() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/base/item-image.tsx lines 32–67

export 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"
            render={<a href="#" />}
            role="listitem"
          >
            <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>
          </Item>
        ))}
      </ItemGroup>
    </div>
  )
}