Tuile

بلاطةTile

Stablesrc/dsm/components/tile.tsx

La tuile est un lien enrichi vers une démarche, une rubrique ou une institution, avec une icône dans un cadre en arche ou une image. Toute la surface de la tuile est cliquable.

Import

import { Tile } from "@/dsm/components/tile";

Exemples

Par défaut

Orientation verticale avec icône en cadre arche.

LTR

Identité et voyage

Carte nationale d'identité électronique, passeport biométrique, carte de résident.

Horizontale

Orientation horizontale, adaptée à une colonne étroite.

LTR

Santé

AMO, carte Tadamon, rendez-vous médicaux.

Éducation

Inscriptions, bourses, équivalence de diplômes.

Véhicules et permis

Carte grise, permis de conduire, contrôle technique.

Grille de démarches

Cas réel : point d'entrée vers les catégories de démarches.

LTR

Identité et voyage

CNIE, passeport biométrique, carte de résident.

État civil

Actes de naissance, de mariage et de décès.

Véhicules et permis

Carte grise, permis de conduire, vignette.

Santé

AMO, carte Tadamon, rendez-vous médicaux.

Éducation

Inscriptions, bourses, équivalence de diplômes.

Emploi et entreprise

ANAPEC, création d'entreprise, marchés publics.

Usage

Quand l'utiliser

Utilisez une tuile pour un point d'entrée de premier niveau vers une démarche ou une rubrique (page d'accueil, sommaire de catégorie).
Regroupez les tuiles dans un `TileGrid` pour composer une grille de navigation homogène.
Utilisez `orientation="horizontal"` dans une colonne étroite ou une barre latérale.

Quand ne pas l'utiliser

N'utilisez pas de tuile pour une action destructive ou qui ne mène pas à une nouvelle page : préférez `Button`.
Évitez de mélanger icônes et images au sein d'une même grille de tuiles : gardez un langage visuel cohérent.

Accessibilité & langues

Accessibilité

Le titre est un lien agrandi (`after:absolute after:inset-0`) : toute la carte est cliquable au clic, au tactile et au clavier.
L'icône et l'image sont décoratives (`aria-hidden` ou `alt=""`) : le sens est toujours porté par le titre.

RTL & multilingue

La flèche de fin (`ArrowForward`) est automatiquement mise en miroir et glisse vers le début de lecture au survol en arabe.

Propriétés

Tile

Propriété	Type	Défaut	Description
title*	ReactNode	—	Titre du lien, seul élément interactif.
description	ReactNode	—	Texte descriptif court.
href*	string	—	Destination du lien agrandi.
icon	ReactNode	—	Icône affichée dans un cadre `dsm-arch`.
image	string	—	Image affichée à la place de l'icône, dans le même cadre.
orientation	"vertical" \| "horizontal"	vertical	Disposition de l'icône et du texte.
variant	"default" \| "tinted"	default	Fond neutre ou teinté (`bg-surface-muted`).

TileGrid

Propriété	Type	Défaut	Description
columns	2 \| 3 \| 4	3	Nombre de colonnes à partir du point de rupture `sm`.