Mise en page

Bloc de suivi

كتلة المتابعةFollow block

Stablesrc/dsm/components/follow.tsx
Le bloc de suivi associe une inscription à la lettre d'information et des liens vers les réseaux sociaux officiels, sur une bande de fond neutre — typiquement au-dessus du pied de page.

Import

import { FollowBlock } from "@/dsm/components/follow";

Exemples

Par défaut

Lettre d'information et réseaux sociaux officiels.

LTR

Lettre d'information

Recevez l'actualité des services publics.

Suivez-nous

Avec traitement de l'inscription

Cas réel : `onSubscribe` relié à une confirmation.

LTR

Lettre d'information

Recevez l'actualité des services publics.

Suivez-nous

Usage

Quand l'utiliser

  • Placez ce bloc au-dessus du pied de page, sur les pages d'accueil et les pages de rubrique.
  • Fournissez `onSubscribe` pour brancher l'inscription à votre service d'envoi ; sans quoi le formulaire ne fait qu'afficher l'interface.

Quand ne pas l'utiliser

  • Ne dupliquez pas ce bloc à plusieurs endroits d'une même page.
  • N'utilisez pas ce composant pour une inscription nécessitant plus qu'une adresse e-mail : construisez un formulaire dédié.

Accessibilité & langues

Accessibilité

  • Le champ e-mail porte un `<label>` visuellement masqué (`dsm-sr-only`) mais toujours annoncé par les lecteurs d'écran.
  • Chaque lien social porte un `aria-label` explicite : l'icône seule ne suffit jamais à identifier le réseau.

RTL & multilingue

  • Les deux colonnes (inscription, réseaux sociaux) s'inversent naturellement avec la grille, sans classe spécifique au sens de lecture.

Propriétés

FollowBlock
PropriétéTypeDéfautDescription
social*{ label: string; href: string; icon: ReactNode }[]—Liens vers les comptes officiels.
onSubscribe(email: string) => void—Appelé à la soumission du formulaire de lettre d'information.

Composants liés