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

import * as CopyBtnStories from './CopyBtn.stories';

<Meta of={CopyBtnStories} />

<div className="header">
  <h1>CopyBtn</h1>
  <p>Le composant `CopyBtn` est utilisé pour afficher un bouton permettant à l’utilisateur de copier du texte.</p>
</div>

<Canvas of={CopyBtnStories.Default}  />

# API

<Controls of={CopyBtnStories.Default} />

# Exemple d'utilisation

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

<template>
  <main>
    <div class="d-flex flex-wrap align-center pa-4">
      <p class="mb-0 mr-1">
        Patient n°<b>1970756541</b>
      </p>

      <CopyBtn
          label="Copier le numéro de patient"
          text-to-copy="1970756541"
      />
    </div>
  </main>
</template>
`} />