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

import * as PageContainerStories from './PageContainer.stories';

<Meta of={PageContainerStories} />

<div className="header">
  <h1>PageContainer</h1>
  <p>Le composant `PageContainer` est un conteneur transparent utilisé pour afficher une page.</p>
</div>

<Canvas of={PageContainerStories.Default}  />

# API

<Controls of={PageContainerStories.Default} />

# Exemple d'utilisation

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

<template>
    <PageContainer color="primary">
      Contenu de la page
    </PageContainer>
</template>
`} />