David
a0f02ced6e
- Updated DeleteBrandDialog and DeleteCatalogDefinitionDialog to use FormBody and FormActions for better structure. - Replaced DialogFooter with FormActions in various dialogs to standardize button layouts. - Introduced FormSectionTitle in multiple components for consistent section headings. - Adjusted grid layouts to use responsive design with @min-[560px] for better adaptability. - Created SoftwareResourceCreateDialog and SoftwareInstallationEditorDialog for better separation of concerns in software installation management. - Enhanced FormActions to support cancelDisabled prop for better control over button states. - Refined FormSectionTitle to allow for additional HTML elements like "legend" and "span". - Added EntityTableColumnsDialog for managing table column visibility in a more user-friendly manner.
24 lines
1.0 KiB
TypeScript
24 lines
1.0 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
import { ChevronRightIcon } from "../lib/icons";
|
|
|
|
import { FormSectionTitle } from "./form-section-title";
|
|
|
|
/** Grupo de consulta compartido por fichas y plantillas; abierto inicialmente. */
|
|
export function DetailSection({ title, children }: { title: string; children: ReactNode }) {
|
|
return (
|
|
<details className="@container group/detail-section" open>
|
|
<summary className="flex cursor-pointer list-none items-center gap-2 py-2 focus-visible:outline-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden">
|
|
<ChevronRightIcon
|
|
aria-hidden="true"
|
|
className="size-3 shrink-0 text-muted-foreground transition-transform group-open/detail-section:rotate-90 motion-reduce:transition-none"
|
|
/>
|
|
<FormSectionTitle as="span">{title}</FormSectionTitle>
|
|
</summary>
|
|
<div className="space-y-3 border-t border-border/60 px-5 pb-2 [&>dl>div:first-child]:pt-2.5 [&>dl>div:last-child]:pb-2.5">
|
|
{children}
|
|
</div>
|
|
</details>
|
|
);
|
|
}
|