main
import type { ReactNode } from 'react'
export interface AuthCardProps {
/** Header badge (KernelMark or IconBadge), rendered centered above the title. */
badge?: ReactNode
heading: string
subheading?: ReactNode
/** Extra header content under the subheading (address chips, notes, ...). */
headerExtra?: ReactNode
children: ReactNode
}
/** 440px white card: the single content column of every auth screen. */
export function AuthCard({ badge, heading, subheading, headerExtra, children }: AuthCardProps) {
return (
<section className="flex w-full max-w-[460px] flex-col gap-[18px] rounded-card border border-border bg-card p-6 sm:gap-[22px] sm:p-8 lg:max-w-[440px]">
<header className="flex w-full flex-col items-center gap-3 text-center">
{badge}
<h1 className="w-full font-mono text-[21px] font-bold leading-tight tracking-[-0.6px] text-foreground sm:text-[23px]">
{heading}
</h1>
{subheading && <p className="max-w-[340px] text-sm leading-[1.5] text-muted-foreground">{subheading}</p>}
{headerExtra}
</header>
{children}
</section>
)
}