David
ccb52fb534
- Introduced `CatalogFieldPickerDialog` and `CatalogFieldPickerList` for selecting catalog fields. - Implemented `appendTemplateFields` helper function for managing template fields. - Added tests for catalog field selection and template field management. - Created reusable components for field picking and reordering in the UI library. - Enhanced drag-and-drop functionality for reordering items in lists.
28 lines
647 B
TypeScript
28 lines
647 B
TypeScript
import type { ReactNode } from "react";
|
|
import { useId } from "react";
|
|
|
|
import { FormSectionTitle } from "./form-section-title";
|
|
|
|
/** Bloque visual reutilizable con título accesible; no altera validación ni datos. */
|
|
export function FormSection({
|
|
title,
|
|
children,
|
|
variant = "card",
|
|
}: {
|
|
title: string;
|
|
children: ReactNode;
|
|
variant?: "card" | "plain";
|
|
}) {
|
|
const id = useId();
|
|
|
|
return (
|
|
<section
|
|
aria-labelledby={id}
|
|
className={variant === "plain" ? "@container space-y-3" : "space-y-4 rounded-lg border p-4"}
|
|
>
|
|
<FormSectionTitle id={id}>{title}</FormSectionTitle>
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|