Les props : passer des données à un composant

<BadgeEtat etat="VA" />
<CarteFiche fiche={fiche} />
<ListeFrais frais={fiche.fraisHorsForfait} modifiable={true} />

// src/components/BadgeEtat.tsx
import type { EtatFiche } from '../types';

const LIBELLES: Record<EtatFiche, string> = {
  CR: 'Saisie en cours',
  CL: 'Clôturée',
  VA: 'Validée',
  MP: 'Mise en paiement',
};

type BadgeEtatProps = {
  etat: EtatFiche;
};

export function BadgeEtat({ etat }: BadgeEtatProps) {
  return <span className={`badge badge-${etat.toLowerCase()}`}>{LIBELLES[etat]}</span>;
}

export function BadgeEtat(props: BadgeEtatProps) {
  const etat = props.etat;
  …
}

// src/types.ts : les données échangées avec l'API d'AppliFrais
export type EtatFiche = 'CR' | 'CL' | 'VA' | 'MP';

export type FicheResume = {
  id: number;
  mois: string;                  // "2026-10"
  etat: EtatFiche;
  montantValide: number | null;  // null tant que la fiche n'est pas validée
};

export type Frais = {
  id: number;
  date: string;                  // "2026-10-14"
  libelle: string;
  montant: number;
};

<BadgeEtat />                 // Erreur : la propriété 'etat' est manquante
<BadgeEtat etat="Validée" />  // Erreur : '"Validée"' n'est pas assignable au type 'EtatFiche'
<BadgeEtat etat="VA" />       // Correct

<CarteFiche
  fiche={fiche}                    // un objet
  compacte                         // un booléen : écrire la prop seule vaut true
  nbMax={5}                        // un nombre, entre accolades
  titre="Octobre"                  // une chaîne, entre guillemets
  onSelection={(id) => voir(id)}   // une fonction
/>

// src/components/CarteFiche.tsx
import { BadgeEtat } from './BadgeEtat';
import { formatMois, formatMontant } from '../format';
import type { FicheResume } from '../types';

type CarteFicheProps = {
  fiche: FicheResume;
};

export function CarteFiche({ fiche }: CarteFicheProps) {
  return (
    <article className="carte-fiche">
      <h2>Fiche de frais – {formatMois(fiche.mois)}</h2>
      <BadgeEtat etat={fiche.etat} />
      {fiche.montantValide !== null && <p>Montant validé : {formatMontant(fiche.montantValide)}</p>}
    </article>
  );
}

// src/format.ts
const euros = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });
const moisAnnee = new Intl.DateTimeFormat('fr-FR', { month: 'long', year: 'numeric' });

export function formatMontant(montant: number): string {
  return euros.format(montant);                       // 389.2 -> "389,20 €"
}

// "2026-10-14" -> "14/10/2026", sans passer par Date (pas de décalage de fuseau horaire)
export function formatDate(date: string): string {
  return date.split('-').reverse().join('/');
}

// "2026-10" -> "octobre 2026"
export function formatMois(mois: string): string {
  const [annee, numero] = mois.split('-').map(Number);
  return moisAnnee.format(new Date(annee, numero - 1, 1));   // les mois de Date commencent à 0
}

type ListeFraisProps = {
  frais: Frais[];
  modifiable?: boolean;     // facultative
  titre?: string;           // facultative
};

export function ListeFrais({ frais, modifiable = false, titre = 'Frais hors forfait' }: ListeFraisProps) {
  …
}

function CarteFiche({ fiche }: CarteFicheProps) {
  fiche.etat = 'CL';           // INTERDIT : on modifie un objet du parent
  …
}

// src/components/FiltreEtat.tsx
import type { EtatFiche } from '../types';

type FiltreEtatProps = {
  valeur: EtatFiche | '';
  onChange: (etat: EtatFiche | '') => void;   // une fonction qui reçoit l'état choisi
};

export function FiltreEtat({ valeur, onChange }: FiltreEtatProps) {
  return (
    <p>
      <label htmlFor="filtre-etat">État</label>{' '}
      <select
        id="filtre-etat"
        value={valeur}
        onChange={(e) => onChange(e.target.value as EtatFiche | '')}
      >
        <option value="">Toutes les fiches</option>
        <option value="CR">Saisie en cours</option>
        <option value="CL">Clôturées</option>
        <option value="VA">Validées</option>
        <option value="MP">Mises en paiement</option>
      </select>
    </p>
  );
}

import type { ReactNode } from 'react';

type EncadreProps = {
  titre: string;
  children: ReactNode;      // n'importe quoi d'affichable : texte, éléments, composants
};

export function Encadre({ titre, children }: EncadreProps) {
  return (
    <section className="encadre">
      <h2>{titre}</h2>
      {children}
    </section>
  );
}

// Utilisation
<Encadre titre="Règles de remboursement">
  <p>Les repas sont remboursés jusqu'à 25 € sur justificatif.</p>
  <p>Les frais doivent être saisis avant le 10 du mois suivant.</p>
</Encadre>

import type { ComponentProps } from 'react';

type BoutonProps = ComponentProps<'button'> & { variante?: 'principal' | 'danger' };

export function Bouton({ variante = 'principal', className = '', ...reste }: BoutonProps) {
  return <button className={`bouton bouton-${variante} ${className}`} {...reste} />;
}

<Bouton variante="danger" type="button" onClick={supprimer} disabled={enCours}>Supprimer</Bouton>