Files
writer-work-flow/apps/web/components/ui/SectionHeader.tsx
2026-06-28 07:31:20 +02:00

30 lines
715 B
TypeScript

import type { ReactNode } from "react";
import { cn } from "@/lib/ui/variants";
interface SectionHeaderProps {
title: string;
description?: ReactNode;
action?: ReactNode;
className?: string;
}
export function SectionHeader({
title,
description,
action,
className,
}: SectionHeaderProps) {
return (
<div className={cn("flex items-start justify-between gap-4", className)}>
<div className="min-w-0">
<h2 className="font-serif text-base text-ink">{title}</h2>
{description ? (
<p className="mt-1 text-sm leading-6 text-ink-soft">{description}</p>
) : null}
</div>
{action ? <div className="shrink-0">{action}</div> : null}
</div>
);
}