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

item-header.tsx — ui Source File

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

File tsx DocumentationAtlas ContentSourcing 2 imports 1 functions

Entity Profile

Dependency Diagram

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

Relationship Graph

Source Code

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

const models = [
  {
    name: "v0-1.5-sm",
    description: "Everyday tasks and UI generation.",
    image:
      "https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop",
    credit: "Valeria Reverdo on Unsplash",
  },
  {
    name: "v0-1.5-lg",
    description: "Advanced thinking or reasoning.",
    image:
      "https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop",
    credit: "Michael Oeser on Unsplash",
  },
  {
    name: "v0-2.0-mini",
    description: "Open Source model for everyone.",
    image:
      "https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop",
    credit: "Cherry Laithang on Unsplash",
  },
]

export function ItemHeaderDemo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-6">
      <ItemGroup className="grid grid-cols-3 gap-4">
        {models.map((model) => (
          <Item key={model.name} variant="outline">
            <ItemHeader>
              <Image
                src={model.image}
                alt={model.name}
                width={128}
                height={128}
                className="aspect-square w-full rounded-sm object-cover"
              />
            </ItemHeader>
            <ItemContent>
              <ItemTitle>{model.name}</ItemTitle>
              <ItemDescription>{model.description}</ItemDescription>
            </ItemContent>
          </Item>
        ))}
      </ItemGroup>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • image
  • item

Source

Frequently Asked Questions

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

Analyze Your Own Codebase

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

Try Supermodel Free