# SettingsLayoutMain

> Content column: a single stack that becomes a 2-column masonry at 1180px of page width, where each direct child (a card) is not split across columns.

Source: https://ui.jcsoftdev.com/docs/components/settings-layout-main

Content column: a single stack that becomes a 2-column masonry at 1180px of
page width, where each direct child (a card) is not split across columns.

## Import

```ts
import { SettingsLayoutMain } from "@jcsoftdev/ui/containers";
```

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

## Usage

```tsx
<SettingsLayoutMain>
  <>
          <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>
        </>
</SettingsLayoutMain>
```

## 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](/storybook/?path=/story/containers-settingslayout--default)
- [Narrow Page](/storybook/?path=/story/containers-settingslayout--narrow-page)
- [Narrow](/storybook/?path=/story/containers-settingslayout--narrow)

## Source

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