SettingsLayout

Implemented

Two-column settings shell — vertical section rail + content panel; sections are caller-defined SettingsSection entries (bounded 3-8, NASA Rule 2), not a fixed list. Left rail is a <nav aria-label> landmark labelled via the bilingual NAV_LABELS map (locale prop, fr default); the active entry carries aria-current="page". Implemented and exported from the barrel, but zero current adoption as of 2026-09-14.

Categorytemplates

Sourcesrc/components/templates/settingslayout/SettingsLayout.tsx

AI HintUse for page layouts. Define structure and composition patterns.

Coquille des paramètres : rail vertical de sections (démo : Profil / Facturation / Équipe / API / Notifications) + zone de contenu. FR-CA : « Sections de paramètres · Paramètres ».

SettingsLayout

Template - Account & Admin family (Family 8)

Disposition deux colonnes : rail vertical de sections (280 px) avec aria-current="page" + zone de contenu principal. Navigation par clic sur le rail.

Facturation

Coordonnées bancaires pour le paiement de vos redevances.

Titulaire du compte

Numéro de transit

This component supports light and dark mode.

Composition

SettingsLayout gère la navigation entre sous-sections des paramètres. Le rail vertical liste les sections avec libellé + description ; la zone principale est déterminée par le parent.

Prop

Type

Default

Description

title*

string

—

Titre du panneau.

intro

string

—

Optional intro sentence rendered under the H1. Omitted → no paragraph.

sections*

SettingsSection[]

—

Liste des sections.

currentSectionId*

string

—

Section active.

onSectionChange

(id: string) => void

—

Called with the section id on nav click.

children*

React.ReactNode

—

Contenu de la section active.

locale

"fr" | "en"

—

Switches the nav landmark label (fr default / en).

className

string

—

Extra classes appended to the root <section> element.

Props

Preview

SettingsLayout

Prop

Type

Required

Default

Description

title

string

Required

—

Page/landmark title rendered as the H1 of the settings page.

intro

string

Optional

—

Optional intro sentence rendered under the H1. Omitted → no paragraph.

sections

SettingsSection[]

Required

—

Settings entries rendered in the left nav: { id; label; description? } — bounded 3-8 (NASA Rule 2, dev-only console.warn when out of bounds).

currentSectionId

string

Required

—

id of the currently active section — receives aria-current="page".

onSectionChange

(id: string) => void

Optional

—

Called with the section id when a nav entry is clicked.

children

React.ReactNode

Required

—

Content of the right column (the active settings panel).

locale

"fr" | "en"

Optional

'fr'

Switches the nav landmark label via the NAV_LABELS map (Sections de paramètres / Settings sections).

className

string

Optional

—

Appended to the root <section> class list.

Quick use:<SettingsLayout />

Accessibility

ARIA rolenavigation (left)

Usage

Import

tsxSnippet

import { SettingsLayout } from "@epasslive/design-system"

Example 1

tsxSnippet

<SettingsLayout title="Paramètres" sections={sections} currentSectionId="billing" onSectionChange={setSection}>{panel}</SettingsLayout>

Example 2

tsxSnippet

<SettingsLayout title="Settings" sections={sections} currentSectionId="account" locale="en">{panel}</SettingsLayout>

Anti-patterns

— Do not include business logic in templates

— Avoid hardcoded content in templates