# Silke list

List of SilkeListItem components

## Basic usage

```js
const items = [{ label: 'Item 1' }, { label: 'Item 2' }, 'divider', { label: 'Item 3' }];

<SilkeList items={items} />;
```

## Nested list

```js
const items = [
  { label: 'Menu item 1', groupLabel: 'Group 1', icon: 'widget' },
  {
    label: 'Menu item 2',
    groupLabel: 'Group 1',
    icon: 'widget',
    tag: { label: 'AI', size: 'tiny', kind: 'secondary', icon: 'ai.sparkle' },
  },
  'divider',
  {
    label: 'Menu item 3',
    groupLabel: 'Group 2',
    icon: 'widget',
    items: [
      { label: 'Menu item 3.1', icon: 'widget' },
      {
        label: 'Menu item 3.2',
        icon: 'widget',
        items: [
          { label: 'Menu item 3.2.1', icon: 'widget' },
          { label: 'Menu item 3.2.2', icon: 'widget' },
          { label: 'Menu item 3.2.3', icon: 'widget' },
        ],
      },
      { label: 'Menu item 3.3', icon: 'widget' },
    ],
  },
  {
    label: 'Menu item 5',
    groupLabel: 'Group 2',
    tag: { label: 'Beta', size: 'tiny', color: 'dark' },
    icon: 'widget',
  },
];
<SilkeList items={items} />;
```

## Sizes

```js
const items = [
  { label: 'Action 1', icon: 'widget' },
  { label: 'Action 2', icon: 'widget' },
  { label: 'Action 3', icon: 'widget' },
  { label: 'Action 4', icon: 'widget' },
];

<SilkeBox gap="l" column fill>
  <SilkeTextSmall>Small</SilkeTextSmall>
  <SilkeList items={items} size="s" />

  <SilkeTextSmall>Base</SilkeTextSmall>
  <SilkeList items={items} size="base" />
</SilkeBox>;
```

## With link

```js
const items = [
  { label: 'Action 1', icon: 'widget', link: '#' },
  { label: 'Action 2', icon: 'widget', link: 'https://www.google.com' },
  { label: 'Action 3', icon: 'widget', link: 'https://www.google.com' },
  { label: 'Action 4', icon: 'widget', link: 'https://www.google.com' },
];
<SilkeList items={items} />;
```

## With gap

```js
const items = [
  { label: 'Action 1', icon: 'widget', link: '#' },
  { label: 'Action 2', icon: 'widget', link: 'https://www.google.com' },
  { label: 'Action 3', icon: 'widget', link: 'https://www.google.com' },
  { label: 'Action 4', icon: 'widget', link: 'https://www.google.com' },
];
<SilkeList items={items} gap />;
```

## With active indicator

```js
const [activeItem, setActiveItem] = React.useState('Item 1');

const items = [
  { label: 'Item 1', active: activeItem === 'Item 1', onClick: () => setActiveItem('Item 1') },
  { label: 'Item 2', active: activeItem === 'Item 2', onClick: () => setActiveItem('Item 2') },
  { label: 'Item 3', active: activeItem === 'Item 3', onClick: () => setActiveItem('Item 3') },
];

<SilkeBox column gap="xxs">
  <SilkeList items={items} />
</SilkeBox>;
```