SettingsLayout

Two-column settings grid (side nav + content). Collapses to one column at 940px or less of the ancestor @container/page.

Import

import { SettingsLayout } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/settings-layout.

Usage

<SettingsLayout>
  <>
          <SettingsLayoutNav aria-label="Secciones de configuración">
            <SettingsLayoutNavItem active>Negocio</SettingsLayoutNavItem>
            <SettingsLayoutNavItem>Horarios</SettingsLayoutNavItem>
            <SettingsLayoutNavItem>Servicios</SettingsLayoutNavItem>
            <SettingsLayoutNavItem>Notificaciones</SettingsLayoutNavItem>
          </SettingsLayoutNav>
          <SettingsLayoutMain>
            <Card>
              <CardHeader>
                <h3 className="m-0 font-semibold text-[14px]">Recordatorios</h3>
              </CardHeader>
              <SettingsRow
                title="Recordatorio por WhatsApp"
                description="Se envía 2 horas antes de la cita."
                control={<Switch defaultChecked aria-label="Recordatorio por WhatsApp" />}
              />
              <SettingsRow
                title="Reseña tras el servicio"
                description="Pide una reseña al terminar la cita."
                control={<Switch aria-label="Reseña tras el servicio" />}
              />
            </Card>
            <Card>
              <CardHeader>
                <h3 className="m-0 font-semibold text-[14px]">Cobros</h3>
              </CardHeader>
              <SettingsRow
                title="Aceptar Yape y Plin"
                control={<Switch defaultChecked aria-label="Aceptar Yape y Plin" />}
              />
            </Card>
          </SettingsLayoutMain>
        </>
</SettingsLayout>

Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Narrow Page
• Narrow

Source

packages/ui/src/containers/settings-layout/settings-layout.tsx