33 lines
892 B
TypeScript
33 lines
892 B
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
interface OnboardingHeaderProps {
|
|
title: string;
|
|
subtitle: string;
|
|
emoji: string;
|
|
}
|
|
|
|
export function OnboardingHeader({ title, subtitle, emoji }: OnboardingHeaderProps) {
|
|
return (
|
|
<Box textAlign="center" marginBottom={8}>
|
|
<Surface
|
|
variant="gradient-blue"
|
|
rounded="xl"
|
|
width="4rem"
|
|
height="4rem"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
marginX="auto"
|
|
marginBottom={4}
|
|
border="1px solid var(--ui-color-intent-primary)"
|
|
>
|
|
<Text size="2xl">{emoji}</Text>
|
|
</Surface>
|
|
<Heading level={1} size="4xl" weight="bold" marginBottom={2}>{title}</Heading>
|
|
<Text variant="low">{subtitle}</Text>
|
|
</Box>
|
|
);
|
|
} |