item-icon.tsx — ui Source File

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

File tsx DocumentationAtlas SearchAPI 3 imports 1 functions

Entity Profile

DocumentationAtlas→ SearchAPI→ item-icon.tsx — ui Source File

Dependency Diagram

graph LR
  a52fea3e_c7cd_2be0_a653_df6fe96baad8["item-icon.tsx"]
  4544fa74_9b37_0912_c55e_f4ff161b8e83["button"]
  a52fea3e_c7cd_2be0_a653_df6fe96baad8 --> 4544fa74_9b37_0912_c55e_f4ff161b8e83
  6dd5189d_43e3_a38a_acbe_4ea1ae186ae2["item"]
  a52fea3e_c7cd_2be0_a653_df6fe96baad8 --> 6dd5189d_43e3_a38a_acbe_4ea1ae186ae2
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  a52fea3e_c7cd_2be0_a653_df6fe96baad8 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  style a52fea3e_c7cd_2be0_a653_df6fe96baad8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Button } from "@/examples/base/ui/button"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/examples/base/ui/item"
import { ShieldAlertIcon } from "lucide-react"

export function ItemIcon() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-6">
      <Item variant="outline">
        <ItemMedia variant="icon">
          <ShieldAlertIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Security Alert</ItemTitle>
          <ItemDescription>
            New login detected from unknown device.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm" variant="outline">
            Review
          </Button>
        </ItemActions>
      </Item>
    </div>
  )
}