Item

import {
  ItemGroup,
  Item,
  ItemMedia,
  ItemContent,
  ItemHeader,
  ItemTitle,
  ItemDescription,
  ItemActions,
  ItemFooter,
  ItemSeparator,
} from '@caroainc/ui-components'

<Item>
  <ItemMedia>
    <Icon name="File" />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>ファイル名.txt</ItemTitle>
    <ItemDescription>最終更新: 2024年1月1日</ItemDescription>
  </ItemContent>
</Item>

<Item variant="base">Base (デフォルト)</Item>
<Item variant="outline">Outline</Item>
<Item variant="muted">Muted</Item>
<Item variant="ghost">Ghost</Item>

<Item size="sm">Small</Item>
<Item size="default">Default</Item>
<Item size="lg">Large</Item>

<Item interactive>
  <ItemMedia>
    <Icon name="Settings" />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>設定</ItemTitle>
    <ItemDescription>アプリケーションの設定を変更</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Icon name="ChevronRight" />
  </ItemActions>
</Item>

<ItemMedia variant="default">アイコン</ItemMedia>
<ItemMedia variant="icon">背景付きアイコン</ItemMedia>
<ItemMedia variant="image">画像</ItemMedia>
<ItemMedia variant="avatar">円形アバター</ItemMedia>

<Item>
  <ItemMedia variant="icon">
    <Icon name="FileText" />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>ドキュメント.pdf</ItemTitle>
    <ItemDescription>2.4 MB</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="ghost" size="sm">
      <Icon name="Download" size="sm" />
    </Button>
    <Button variant="ghost" size="sm">
      <Icon name="Trash2" size="sm" />
    </Button>
  </ItemActions>
</Item>

<ItemGroup>
  <Item interactive>
    <ItemMedia>
      <Icon name="Inbox" />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>受信トレイ</ItemTitle>
    </ItemContent>
    <ItemActions>
      <Badge variant="primary">12</Badge>
    </ItemActions>
  </Item>
  <ItemSeparator />
  <Item interactive>...</Item>
</ItemGroup>