Item

1import Image from "next/image"
2 
3import {
4  Example,
5  ExampleWrapper,
6} from "@/registry/bases/radix/components/example"
7import { Button } from "@/registry/bases/radix/ui/button"
8import {
9  Item,
10  ItemActions,
11  ItemContent,
12  ItemDescription,
13  ItemFooter,
14  ItemGroup,
15  ItemHeader,
16  ItemMedia,
17  ItemSeparator,
18  ItemTitle,
19} from "@/registry/bases/radix/ui/item"
20import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
21 
22export default function ItemExample() {
23  return (
24    <ExampleWrapper>
25      <DefaultVariantItems />
26      <OutlineVariantItems />
27      <MutedVariantItems />
28      <DefaultVariantItemsSmall />
29      <OutlineVariantItemsSmall />
30      <MutedVariantItemsSmall />
31      <DefaultVariantItemsExtraSmall />
32      <OutlineVariantItemsExtraSmall />
33      <MutedVariantItemsExtraSmall />
34      <DefaultLinkItems />
35      <OutlineLinkItems />
36      <MutedLinkItems />
37      <DefaultItemGroup />
38      <OutlineItemGroup />
39      <MutedItemGroup />
40      <ItemSeparatorExample />
41      <ItemHeaderExamples />
42      <ItemFooterExamples />
43      <ItemHeaderAndFooterExamples />
44      <DefaultVariantItemsWithImage />
45      <OutlineVariantItemsWithImage />
46      <OutlineVariantItemsWithImageSmall />
47      <OutlineVariantItemsWithImageExtraSmall />
48      <MutedVariantItemsWithImage />
49    </ExampleWrapper>
50  )
51}
52 
53function DefaultVariantItems() {
54  return (
55    <Example title="Default">
56      <Item>
57        <ItemContent>
58          <ItemTitle>Title Only</ItemTitle>
59        </ItemContent>
60      </Item>
61      <Item>
62        <ItemContent>
63          <ItemTitle>Title + Button</ItemTitle>
64        </ItemContent>
65        <ItemActions>
66          <Button variant="outline">Action</Button>
67        </ItemActions>
68      </Item>
69      <Item>
70        <ItemContent>
71          <ItemTitle>Title + Description</ItemTitle>
72          <ItemDescription>
73            This is a description that provides additional context.
74          </ItemDescription>
75        </ItemContent>
76      </Item>
77      <Item>
78        <ItemContent>
79          <ItemTitle>Title + Description + Button</ItemTitle>
80          <ItemDescription>
81            This item includes a title, description, and action button.
82          </ItemDescription>
83        </ItemContent>
84        <ItemActions>
85          <Button variant="outline">Action</Button>
86        </ItemActions>
87      </Item>
88      <Item>
89        <ItemMedia variant="icon">
90          <IconPlaceholder
91            lucide="InboxIcon"
92// … truncated