AuthLayoutArt

Holds the illustration (a default AuthIllustration when empty). It hides under 448px of layout width and, in centered, sits faded behind the panel. A drawn look is at most 12rem tall while it is stacked above the panel, so the form stays in reach, and 34rem beside it; set --auth-art-max-h on this part to change that.

Import

import { AuthLayoutArt } from "@jcsoftdev/ui/auth";

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

Usage

<AuthLayoutArt layout="split" state="idle" progress={0} activeIndex={0}>
  <>
          <AuthLayout.Brand>EduModules</AuthLayout.Brand>
          <AuthLayout.Art />
          <AuthLayout.Panel>
            <PanelContent />
          </AuthLayout.Panel>
          <AuthLayout.Footer>Soporte: ayuda@edumodules.pe</AuthLayout.Footer>
        </>
</AuthLayoutArt>

Props

Prop	Type	Default	Description
look	AuthLook		Look of the default illustration, used when there are no children (default Slabs).
caption	ReactNode		Text looks only: a supporting line under the headline.
headline	ReactNode		Text looks (Statement) only: the headline (a string animates word by word). Defaults to the UI string welcomeBack.
action	ReactNode		Text looks only: content beside the arrow pill, such as a link.

* marks a required prop.

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

Storybook stories

• Split
• Split Reverse
• Centered
• Typing
• Error State
• Success
• Container Widths
• Custom Illustration
• Brand Follows Art

Source

packages/ui/src/auth/auth-layout/auth-layout.tsx