ItemDemo() — ui Function Reference

Architecture documentation for the ItemDemo() function in item-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ItemDemo() — ui Function Reference

Dependency Diagram

graph TD
  9ca7e1c6_f75c_42db_83a6_1d7b9ab9a5f2["ItemDemo()"]
  6ba856da_423f_8199_f2d3_6c734877cb1c["item-demo.tsx"]
  9ca7e1c6_f75c_42db_83a6_1d7b9ab9a5f2 -->|defined in| 6ba856da_423f_8199_f2d3_6c734877cb1c
  style 9ca7e1c6_f75c_42db_83a6_1d7b9ab9a5f2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/item-demo.tsx lines 149–392

export function ItemDemo() {
  return (
    <div className="@container w-full">
      <div className="flex flex-wrap gap-6 2xl:gap-12">
        <div className="flex max-w-sm flex-col gap-6">
          <Item>
            <ItemContent>
              <ItemTitle>Item Title</ItemTitle>
            </ItemContent>
            <ItemActions>
              <Button variant="outline">Button</Button>
            </ItemActions>
          </Item>
          <Item variant="outline">
            <ItemContent>
              <ItemTitle>Item Title</ItemTitle>
            </ItemContent>
            <ItemActions>
              <Button variant="outline">Button</Button>
            </ItemActions>
          </Item>
          <Item>
            <ItemContent>
              <ItemTitle>Item Title</ItemTitle>
              <ItemDescription>Item Description</ItemDescription>
            </ItemContent>
            <ItemActions>
              <Button variant="outline">Button</Button>
            </ItemActions>
          </Item>
          <Item variant="outline">
            <ItemContent>
              <ItemTitle>Item Title</ItemTitle>
              <ItemDescription>Item Description</ItemDescription>
            </ItemContent>
          </Item>
          <Item variant="muted">
            <ItemContent>
              <ItemTitle>Item Title</ItemTitle>
              <ItemDescription>Item Description</ItemDescription>
            </ItemContent>
          </Item>
          <Item variant="muted">
            <ItemContent>
              <ItemTitle>Item Title</ItemTitle>
              <ItemDescription>Item Description</ItemDescription>
            </ItemContent>
            <ItemActions>
              <Button variant="outline">Button</Button>
              <Button variant="outline">Button</Button>
            </ItemActions>
          </Item>
          <Item variant="outline">
            <ItemMedia variant="icon">
              <TicketIcon />
            </ItemMedia>
            <ItemContent>
              <ItemTitle>Item Title</ItemTitle>
            </ItemContent>
            <ItemActions>
              <Button size="sm">Purchase</Button>
            </ItemActions>
          </Item>
          <Item variant="muted">
            <ItemMedia variant="icon">
              <TicketIcon />
            </ItemMedia>
            <ItemContent>
              <ItemTitle>Item Title</ItemTitle>
              <ItemDescription>Item Description</ItemDescription>
            </ItemContent>
            <ItemActions>
              <Button size="sm">Upgrade</Button>
            </ItemActions>
          </Item>
          <FieldLabel>
            <Field orientation="horizontal">
              <FieldContent>
                <FieldTitle>Field Title</FieldTitle>
                <FieldDescription>Field Description</FieldDescription>
              </FieldContent>