Cover Header

npx shadcn@latest add https://blocks.aiskillhub.info/api/registry/cover-header

export function CoverHeader({ title, emoji = "📄", cover }: { title: string; emoji?: string; cover?: string }) {
  return (
    <header className="overflow-hidden rounded-2xl border border-border">
      <div className="h-32 w-full bg-gradient-to-br from-violet-500/30 via-sky-500/20 to-emerald-500/20"
        style={cover ? { backgroundImage: `url(${cover})`, backgroundSize: "cover" } : undefined} />
      <div className="relative px-6 pb-5">
        <span className="absolute -top-7 flex h-14 w-14 items-center justify-center rounded-xl border border-border bg-surface text-3xl shadow">{emoji}</span>
        <h1 className="pt-10 text-2xl font-bold tracking-tight">{title}</h1>
      </div>
    </header>
  );
}