Skip to content
Clone
07f791d
40 lines 1.1 KB
import type { LucideIcon } from 'lucide-react'
import type { ReactNode } from 'react'
export function Heading({
title,
description,
step,
icon: Icon,
success = false,
}: {
title: string
description?: ReactNode
step?: string
icon?: LucideIcon
success?: boolean
}) {
return (
<>
{Icon && (
<div className="mb-6 flex justify-center">
<div
className={`flex size-14 items-center justify-center rounded-full ${success ? 'bg-success-bg text-success' : 'bg-accent-soft text-accent'}`}
>
<Icon size={26} strokeWidth={1.8} />
</div>
</div>
)}
<div className="mb-8 flex flex-col items-center gap-2 text-center">
{step && <p className="text-xs leading-normal text-muted">{step}</p>}
<h1
tabIndex={-1}
className="w-full text-2xl leading-[1.3] font-semibold tracking-[-0.4px] outline-none md:text-[28px]"
>
{title}
</h1>
{description && <p className="w-full text-base leading-[1.6] whitespace-pre-line text-muted">{description}</p>}
</div>
</>
)
}