Item

리스트 아이템을 구성하는 유연한 레이아웃 컴포넌트

Basic Usage

Item은 미디어, 콘텐츠, 액션으로 구성된 리스트 아이템입니다.

User Profile

Manage your account settings and preferences

tsx

<Item>
  <ItemMedia variant="icon">
    <User />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>User Profile</ItemTitle>
    <ItemDescription>Manage your account settings</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="ghost" size="icon-sm">
      <MoreHorizontal />
    </Button>
  </ItemActions>
</Item>

Variants

3가지 variant를 제공합니다.

Default Variant

기본 스타일입니다.

Outline Variant

테두리가 있는 스타일입니다.

Muted Variant

배경색이 있는 스타일입니다.

tsx

<Item variant="default">...</Item>
<Item variant="outline">...</Item>
<Item variant="muted">...</Item>

Media Variants

ItemMedia는 아이콘과 이미지를 지원합니다.

Default Media

아이콘만 표시

Icon Media

아이콘 박스 스타일

Image Media

이미지 스타일

tsx

<ItemMedia variant="default">
  <FileText className="size-5" />
</ItemMedia>

<ItemMedia variant="icon">
  <Settings />
</ItemMedia>

<ItemMedia variant="image">
  <img src="..." alt="Avatar" />
</ItemMedia>

Item Group

ItemGroup으로 여러 아이템을 그룹화할 수 있습니다.

Profile

New

Settings

Documents

tsx

<ItemGroup className="rounded-lg border divide-y">
  <Item size="sm">
    <ItemMedia variant="icon">
      <User />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Profile</ItemTitle>
    </ItemContent>
    <ItemActions>
      <Badge variant="secondary">New</Badge>
    </ItemActions>
  </Item>
  <ItemSeparator />
  <Item size="sm">
    <ItemMedia variant="icon">
      <Settings />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Settings</ItemTitle>
    </ItemContent>
  </Item>
</ItemGroup>

Usage

tsx

import {
  Item,
  ItemMedia,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
  ItemGroup,
  ItemSeparator,
} from '@gpters-internal/ui';

function Example() {
  return (
    <Item>
      <ItemMedia variant="icon">
        <User />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>User Profile</ItemTitle>
        <ItemDescription>Manage settings</ItemDescription>
      </ItemContent>
    </Item>
  );
}