b7a4cf4ce8
All checks were successful
Build and Release / build-and-release (push) Successful in 13m12s
- Implemented Button component with various props for customization. - Created Modal component with header, content, and footer subcomponents. - Added Spinner component for loading indicators. - Developed Toast component for displaying notifications. - Introduced Tooltip component for contextual hints with keyboard shortcuts. - Added corresponding CSS modules for styling each component. - Updated index file to export new components. - Configured TypeScript settings for the UI package.
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import styles from './AuthLayout.module.css';
|
|
|
|
interface AuthLayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* AuthLayout — frame for the login / register pages.
|
|
*
|
|
* Desktop: keeps the existing side-by-side "card" — purple branded
|
|
* background, centred dialog with a logo column on the left and
|
|
* the form on the right.
|
|
*
|
|
* Mobile (≤768px): collapses into a full-screen `--background-primary`
|
|
* surface with the logo + wordmark stacked at the top of the form
|
|
* column, matching the Fluxer mobile reference. The card chrome,
|
|
* purple background, and pattern are all hidden via the media
|
|
* query in `AuthLayout.module.css`.
|
|
*/
|
|
export function AuthLayout({ children }: AuthLayoutProps) {
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.pattern} />
|
|
<div className={styles.cardContainer}>
|
|
<div className={styles.card}>
|
|
<div className={styles.logoSide}>
|
|
<div className={styles.logoIcon}>B</div>
|
|
<span className={styles.wordmark}>Brycord</span>
|
|
</div>
|
|
<div className={styles.formSide}>
|
|
{/* Mobile-only logo banner — appears above the form
|
|
when the side column is hidden. The
|
|
`data-mobile-logo` attribute is what the CSS
|
|
media query targets to switch its display. */}
|
|
<div className={styles.mobileLogo} data-mobile-logo>
|
|
<div className={styles.mobileLogoIcon}>B</div>
|
|
<span className={styles.mobileWordmark}>Brycord</span>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|