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

import * as SubHeaderStories from './SubHeader.stories';

<Meta of={SubHeaderStories} />

<div className="header">
	<h1>SubHeader</h1>
	<p>Le composant `SubHeader` est utilisé pour afficher un bloc d’informations sous l’en-tête principale.</p>
</div>

{/* func-version-start */}
<p className="func-version-badge">Dernière mise à jour fonctionnelle : V1.1.3 - 22/07/2026</p>
{/* func-version-end */}
{/* a11y-version-start */}
<p className="a11y-version-badge">Dernière mise à jour accessibilité : V1.1.3 - 22/07/2026</p>
{/* a11y-version-end */}


<Canvas of={SubHeaderStories.Default}  />

# API

<Controls of={SubHeaderStories.Default} />

# Exemple d'utilisation

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

<template>
	<SubHeader
		back-btn-text="Back"
		title-text="Paul Dupont"
		sub-title-text="1 69 08 75 125 456 75"
		sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
	/>
</template>
`} />