BalconyFigure

←→

Coupe d’un sentier en balcon, vue dans le sens de la marche — le replat du sentier, le terrain qui monte d’un côté et plonge de l’autre à la pente mesurée.

stableÀ valider

// Titre : Balcon, vide à droite, pente de 35°
import BalconyFigure from '@pathou/components/BalconyFigure';

export default function Exemple() {
  return (
    <div style={{ display: 'flex', gap: 24 }}>
      <BalconyFigure slope={35} side="droit" />
      <BalconyFigure slope={55} side="gauche" />
    </div>
  );
}

Installation

Copie le fichier dans ton projet, ainsi que les tokens qu’il utilise.

src/components/BalconyFigure.tsx
/** Hauteur des figures des cartes de points d'attention (px). */
export const FIG_H = 44;

/**
 * Coupe d'un sentier en balcon, vue dans le sens de la marche : replat du sentier au centre,
 * terrain qui monte d'un côté et plonge de l'autre à la pente mesurée, vide du bon côté.
 */
export default function BalconyFigure({ slope, side }: { slope: number; side: 'gauche' | 'droit' }) {
  const W = 96;
  const cx = 48;
  const cy = 18;
  const ledge = 7;
  const t = slope / 100;
  const ground = `M0 ${cy + (cx - ledge) * t}L${cx - ledge} ${cy}L${cx + ledge} ${cy}L${W} ${cy - (W - cx - ledge) * t}`;
  return (
    <svg width={W} height={FIG_H} viewBox={`0 0 ${W} ${FIG_H}`} aria-hidden="true" style={side === 'droit' ? { transform: 'scaleX(-1)' } : undefined}>
      <path className="alert-context" d={`${ground}L${W} ${FIG_H + 40}L0 ${FIG_H + 40}Z`} />
      <path className="alert-ground" d={ground} />
      <line className="alert-tick" x1="4" x2={cx - ledge} y1={cy} y2={cy} />
      <circle className="alert-rider" cx={cx} cy={cy - 3.5} r="3" />
    </svg>
  );
}

Tokens : --text --muted

Utilisation

import BalconyFigure from './components/BalconyFigure';

<BalconyFigure slope={alert.slope} side={alert.side} />

Anatomie

#	Élément	Rôle
1	Terrain	La pente dessinée à l’angle mesuré (`slope`, en degrés).
2	Cycliste	Le repère sur le replat du sentier.

Guidelines

MUST
Dessiner l’angle réel mesuré, jamais un angle illustratif.

Référence de l’API

Prop	Type	Défaut
`slope`	`number`	requis
`side`	`'gauche' \| 'droit'`	requis