49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Group, Paper, Stack, Text, ThemeIcon, Title } from "@mantine/core";
|
|
|
|
import { OnboardingBackdrop } from "./onboarding-backdrop";
|
|
import { OnboardingWordmark } from "./onboarding-wordmark";
|
|
import classes from "./onboarding-studio.module.css";
|
|
|
|
interface OnboardingAuthShellProps {
|
|
title: ReactNode;
|
|
description: ReactNode;
|
|
icon: ReactNode;
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
}
|
|
|
|
export const OnboardingAuthShell = ({ title, description, icon, children, footer }: OnboardingAuthShellProps) => (
|
|
<main className={classes.page}>
|
|
<OnboardingBackdrop />
|
|
<div className={`${classes.shell} ${classes.authShell}`}>
|
|
<Stack className={classes.authLayout} gap="xl" align="center" justify="center">
|
|
<div className={classes.authBrand}>
|
|
<OnboardingWordmark large />
|
|
</div>
|
|
<Paper className={`${classes.studio} ${classes.authCard}`} radius="lg" p={{ base: "lg", sm: "xl" }}>
|
|
<Stack gap="xl">
|
|
<Group wrap="nowrap" align="flex-start">
|
|
<ThemeIcon size="xl" radius="lg" variant="light">
|
|
{icon}
|
|
</ThemeIcon>
|
|
<Stack gap={4}>
|
|
<Title order={1} size="h2">
|
|
{title}
|
|
</Title>
|
|
<Text c="dimmed">{description}</Text>
|
|
</Stack>
|
|
</Group>
|
|
{children}
|
|
</Stack>
|
|
</Paper>
|
|
{footer ? (
|
|
<Text className={classes.authFooter} size="sm" c="dimmed" ta="center">
|
|
{footer}
|
|
</Text>
|
|
) : null}
|
|
</Stack>
|
|
</div>
|
|
</main>
|
|
);
|