import {Controls, Canvas, Meta, Source, Story} from '@storybook/blocks';

import ChipList from './ChipList.vue';
import * as ChipListStories from './ChipList.stories';

<Meta title="Composants/Données/ChipList" component={ChipList}/>

<div className="header">
  <h1>ChipList</h1>
  <p>Le composant `ChipList` est utilisé pour afficher une liste de puces.</p>
</div>

<Canvas of={ChipListStories.Default}  />

## API

<Controls of={ChipListStories.Default} />

## Exemple d'utilisation avec Vue

<Source dark code={`
<script setup lang="ts">
	import ChipList from '@cnamts/synapse'

	const items = [
		{
			text: 'Email',
			value: 'email',
			state: 'info',
		},
		{
			text: 'Courrier',
			value: 'courrier',
			state: 'success',

		},
		{
			text: 'SMS',
			value: 'sms',
			state: 'error',
		},

		{
			text: 'Telephone',
			value: 'telephone',
			state: 'warning',
		},

	]

</script>
import '../../stories/styles/shared.css';

<template>
	<ChipList
		:items="items"
		:overflow-limit="5"
	/>
</template>

`} />