58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
import type { LucideIcon } from 'lucide-react';
|
|
|
|
interface StepHeaderProps {
|
|
icon: LucideIcon;
|
|
iconContainerClassName?: string;
|
|
title: string;
|
|
description: string;
|
|
/** Use larger icon container (h-24 w-24) for welcome/complete screens */
|
|
large?: boolean;
|
|
}
|
|
|
|
export function StepHeader({
|
|
icon: Icon,
|
|
iconContainerClassName,
|
|
title,
|
|
description,
|
|
large = false,
|
|
}: StepHeaderProps) {
|
|
return (
|
|
<>
|
|
<div
|
|
className={cn(
|
|
'flex animate-in items-center justify-center rounded-full shadow-lg duration-500 zoom-in',
|
|
large ? 'mb-8 size-24' : 'mb-6 size-16',
|
|
iconContainerClassName,
|
|
)}
|
|
>
|
|
<Icon
|
|
className={cn(
|
|
'text-white',
|
|
large ? 'h-12 w-12' : 'h-10 w-10',
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<h1
|
|
className={cn(
|
|
'text-center font-bold tracking-tight text-balance',
|
|
large
|
|
? 'mb-4 text-4xl leading-tight sm:text-4xl md:text-5xl'
|
|
: 'mb-2 text-3xl',
|
|
)}
|
|
dangerouslySetInnerHTML={{ __html: title }}
|
|
/>
|
|
|
|
<p
|
|
className={cn(
|
|
'mb-8 max-w-lg text-center text-balance text-muted-foreground',
|
|
large && 'text-lg',
|
|
)}
|
|
>
|
|
{description}
|
|
</p>
|
|
</>
|
|
);
|
|
}
|