49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
export interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
|
|
title?: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
actions?: React.ReactNode;
|
|
density?: 'compact' | 'normal' | 'spacious';
|
|
}
|
|
|
|
const densityClass: Record<NonNullable<SectionProps['density']>, string> = {
|
|
compact: 'gap-3',
|
|
normal: 'gap-4',
|
|
spacious: 'gap-6',
|
|
};
|
|
|
|
export function Section({
|
|
title,
|
|
description,
|
|
actions,
|
|
density = 'normal',
|
|
className,
|
|
children,
|
|
...props
|
|
}: SectionProps) {
|
|
return (
|
|
<section className={clsx('grid min-w-0', densityClass[density], className)} {...props}>
|
|
{(title || description || actions) && (
|
|
<div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="min-w-0">
|
|
{title && (
|
|
<h2 className="m-0 text-base font-semibold leading-6 text-[var(--bl-text-primary)]">
|
|
{title}
|
|
</h2>
|
|
)}
|
|
{description && (
|
|
<p className="mt-1 max-w-3xl 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>
|
|
)}
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|