Documentation vivante
Catalogue de composants
Chaque bloc ci-dessous est le vrai composant utilisé sur le site, avec ses variantes testables en direct et le code exact à copier pour l'intégrer.
Couleurs
Tokens Tailwind définis dans tailwind.config.ts. Clique une pastille pour copier son code hexadécimal.
Typographie
Fraunces (font-display) pour les titres, Figtree (font-sans) pour le texte courant.
Aa Ééè — Gard'Kaz
Titre de section (font-display, 3xl)
Sous-titre (font-display, xl)
Texte courant en Figtree (font-sans, base) — pour les paragraphes et le contenu des formulaires.
Texte secondaire (font-sans, sm, gris) — légendes et aides de champ.
Label de badge (font-sans, xs, uppercase)
Motifs
La frise de lambrequins (dentelle de bois des cases créoles) est la signature visuelle du site, déclinable dans toutes les teintes de la charte.
Boutons
Button (action) et ButtonLink (lien stylé comme un bouton) : 5 variantes, 3 tailles, état de chargement et icône.
<Button variant="tampon" size="lg">
Réserver une garde
</Button>Badges
Étiquette de statut compacte, utilisée pour l'état des gardes et des gardiens.
<Badge tone="vetiver" dot>En cours</Badge>Champs
TextField, TextArea et SelectField — avec aide, erreur et succès intégrés. Tape un e-mail invalide dans la prévisualisation pour voir l'état d'erreur en direct.
Essaie « maeva@ » puis « maeva@example.re ».
<TextField
label="E-mail"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>Interrupteurs
Toggle binaire animé, utilisé dans les préférences et formulaires de garde.
<Toggle checked={checked} onChange={setChecked} label="Notifications par SMS" />Onglets
Tabs à pilule animée (framer-motion), utilisé pour filtrer les listes de gardes.
Clique un onglet dans la prévisualisation.
<Tabs
tabs={[
{ value: 'actives', label: 'Actives', count: 2 },
{ value: 'venir', label: 'À venir', count: 1 },
{ value: 'terminees', label: 'Terminées', count: 3 },
]}
value={value}
onChange={setValue}
/>Cartes
Conteneur de base, 3 tons, radius généreux et ombre « kaz ».
Garde à Saint-Leu
Johan s'occupe de Zékli et Minouche du 14 au 21 octobre.
<Card tone="cream">
<p>Garde à Saint-Leu</p>
</Card>Avatars
Photo ronde de profil, avec anneau optionnel pour signaler un statut (en ligne, favori…).
<Avatar src="/photo-johan.jpg" name="Johan Hoarau" size={56} ring />Modales
Panneau modal animé, remonte en feuille sur mobile, centré en desktop. Échap et clic extérieur ferment la modale.
Clique le bouton pour ouvrir la vraie modale.
const [open, setOpen] = useState(false);
<Modal open={open} onClose={() => setOpen(false)} title="Confirmer la garde">
<p>Contenu de la modale…</p>
</Modal>Notifications
Toasts empilables (hook useToast), 3 tons, auto-fermeture après 3,8 s.
Les toasts apparaissent en haut à droite.
const { toast } = useToast();
toast('Garde confirmée', { tone: 'success', text: 'Johan a accepté ta demande.' });États
Skeleton (chargement) et EmptyState (liste vide), à afficher pendant et après le fetch réel côté intégration.
<Skeleton className="h-20 w-full" />