@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
73 lines (72 loc) • 2.37 kB
TypeScript
import { ComponentProps } from 'react';
export interface AsideBrandLayoutRootProps extends ComponentProps<"div"> {
}
/**
* A layout component that provides a branded aside section and main content area.
* Useful for landing page, sign in, reset password flows.
*
* The aside section is only visible on large screens (lg breakpoint and above).
*
* @example
* ```tsx
* <AsideBrandLayoutRoot>
* <AsideBrandLayoutAside>
* <BrandLogo />
* </AsideBrandLayoutAside>
* <AsideBrandLayoutMain>
* <SignInForm />
* </AsideBrandLayoutMain>
* </AsideBrandLayoutRoot>
* ```
*
* @example
* ```tsx
* // Stanford Branded example
* <AsideBrandLayoutRoot>
* <AsideBrandLayoutAside>
* <h1 className="text-2xl font-bold">Spezi Web Design System</h1>
* <img
* src="https://biodesign.stanford.edu/_jcr_content/local-header/_jcr_content/custom-logo.img.full.high.png"
* alt="Stanford Byers Center for Biodesign Logo"
* className="w-40"
* />
* </AsideBrandLayoutAside>
* <AsideBrandLayoutMain>
* <SignInForm />
* </AsideBrandLayoutMain>
* </AsideBrandLayoutRoot>
* ```
*
*/
export declare const AsideBrandLayoutRoot: ({ children, className, ...props }: AsideBrandLayoutRootProps) => import("react").JSX.Element;
export interface AsideBrandLayoutAsideProps extends ComponentProps<"aside"> {
}
/**
* The aside section of the AsideBrandLayout.
* This component is only visible on large screens (lg breakpoint and above).
* It provides a branded section with a light background color and centered content.
*
* @example
* ```tsx
* <AsideBrandLayoutAside>
* <BrandLogo />
* <BrandDescription />
* </AsideBrandLayoutAside>
* ```
*/
export declare const AsideBrandLayoutAside: ({ children, className, ...props }: AsideBrandLayoutAsideProps) => import("react").JSX.Element;
export interface AsideBrandLayoutMainProps extends ComponentProps<"main"> {
}
/**
* The main content area of the AsideBrandLayout.
* This component provides a centered container for the primary content,
* such as forms, content sections, or other interactive elements.
*
* @example
* ```tsx
* <AsideBrandLayoutMain>
* <LoginForm />
* </AsideBrandLayoutMain>
* ```
*/
export declare const AsideBrandLayoutMain: ({ children, className, ...props }: AsideBrandLayoutMainProps) => import("react").JSX.Element;