import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
import * as UserMenuBtnStories from './UserMenuBtn.stories';

<Meta of={UserMenuBtnStories}/>

<div className="header">
  <h1>UserMenuBtn</h1>
  <p>Le composant `UserMenuBtn` est utilisé pour afficher un bouton de menu utilisateur avec un menu déroulant.</p>
</div>

<Canvas of={UserMenuBtnStories.Default}/>

# API

<Controls of={UserMenuBtnStories.Default}/>

# Example d'utilisation

<Source dark code={`
  <script setup lang="ts">
  import { UserMenuBtn } from '@cnamts/synapse';
import '../../stories/styles/shared.css';

  const menuItems = [
    { text: 'Administration', value: 'Administration' },
    { text: 'Profil', value: 'Profil' },
    { text: 'Paramètres', value: 'Paramètres' },
  ];
  </script>

  <template>
    <UserMenuBtn
      :items="menuItems"
    />
  </template>
`}
/>