45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
import { AlertBanner } from './AlertBanner.js';
|
|
|
|
export interface FormSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
|
|
title: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
error?: React.ReactNode;
|
|
actions?: React.ReactNode;
|
|
}
|
|
|
|
export function FormSection({
|
|
title,
|
|
description,
|
|
error,
|
|
actions,
|
|
className,
|
|
children,
|
|
...props
|
|
}: FormSectionProps) {
|
|
return (
|
|
<section
|
|
className={clsx(
|
|
'grid gap-4 rounded-xl border border-[var(--bl-border)] bg-[var(--bl-surface-card)] p-5 shadow-sm shadow-black/[0.03]',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="min-w-0">
|
|
<h3 className="m-0 text-base font-semibold leading-6 text-[var(--bl-text-primary)]">
|
|
{title}
|
|
</h3>
|
|
{description && (
|
|
<p className="mt-1 text-sm leading-6 text-[var(--bl-text-secondary)]">{description}</p>
|
|
)}
|
|
</div>
|
|
{actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
|
|
</div>
|
|
{error && <AlertBanner tone="error">{error}</AlertBanner>}
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|