import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
import '../../stories/styles/shared.css';

import * as SyAlertStories from './SyAlert.stories';

<Meta of={SyAlertStories} />

<div className="header">
  <h1>SyAlert</h1>
  <p>Le composant `SyAlert` est utilisé pour afficher une alerte à l’utilisateur.</p>
</div>

<Canvas of={SyAlertStories.Default}  />

# API

<Controls of={SyAlertStories.Default} />

# Exemple d'utilisation

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

const showAlert = ref(true)
;
</script>

<template>
  <SyAlert v-model="showAlert" type="warning" variant="tonal" :closable="true">
    Ceci est une alerte de type "warning".
  </SyAlert>
</template>
`} />