ui Architecture Docs
Home / File/ item-image.tsx — ui Source File

item-image.tsx — ui Source File

Architecture documentation for item-image.tsx, a tsx file in the ui codebase. 2 imports, 0 dependents.

File tsx DocumentationAtlas Changelog 2 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  faac7ebb_17dc_665d_2587_fab99c6ef2dd["item-image.tsx"]
  3eb36dd7_f51a_1431_02e2_7abafe315718["image"]
  faac7ebb_17dc_665d_2587_fab99c6ef2dd --> 3eb36dd7_f51a_1431_02e2_7abafe315718
  c68c8707_2b57_a84c_88d0_54d7bfae76d0["item"]
  faac7ebb_17dc_665d_2587_fab99c6ef2dd --> c68c8707_2b57_a84c_88d0_54d7bfae76d0
  style faac7ebb_17dc_665d_2587_fab99c6ef2dd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import Image from "next/image"
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/examples/radix/ui/item"

const music = [
  {
    title: "Midnight City Lights",
    artist: "Neon Dreams",
    album: "Electric Nights",
    duration: "3:45",
  },
  {
    title: "Coffee Shop Conversations",
    artist: "The Morning Brew",
    album: "Urban Stories",
    duration: "4:05",
  },
  {
    title: "Digital Rain",
    artist: "Cyber Symphony",
    album: "Binary Beats",
    duration: "3:30",
  },
]

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" 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>
  )
}

Domain

Subdomains

Functions

Dependencies

  • image
  • item

Source

Frequently Asked Questions

What does item-image.tsx do?
item-image.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, Changelog subdomain.
What functions are defined in item-image.tsx?
item-image.tsx defines 1 function(s): ItemImage.
What does item-image.tsx depend on?
item-image.tsx imports 2 module(s): image, item.
Where is item-image.tsx in the architecture?
item-image.tsx is located at apps/v4/examples/radix/item-image.tsx (domain: DocumentationAtlas, subdomain: Changelog, directory: apps/v4/examples/radix).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free