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

import * as FranceConnectBtnStories from './FranceConnectBtn.stories';

<Meta of={FranceConnectBtnStories} />

<div className="header">
  <h1>FranceConnectBtn</h1>
  <p>Le composant `FranceConnectBtn` est utilisé pour afficher un bouton permettant à l’utilisateur de se connecter à FranceConnect.</p>
</div>

<Canvas of={FranceConnectBtnStories.Default}  />

## API

<Controls of={FranceConnectBtnStories.Default} />

# Exemple d'utilisation

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

<template>
	<FranceConnectBtn href="/" />

	<br>

	<FranceConnectBtn
		href="/"
		is-connect-plus
	/>
</template>
`} />