42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from "react";
|
|
import { translateReactNode, usePlatformLanguage } from "../i18n/LanguageContext";
|
|
|
|
export type FormSectionVariant = "plain" | "separated" | "panel";
|
|
|
|
export type FormSectionProps = HTMLAttributes<HTMLElement> & {
|
|
children: ReactNode;
|
|
title?: ReactNode;
|
|
description?: ReactNode;
|
|
actions?: ReactNode;
|
|
variant?: FormSectionVariant;
|
|
contentClassName?: string;
|
|
};
|
|
|
|
export default function FormSection({
|
|
children,
|
|
title,
|
|
description,
|
|
actions,
|
|
variant = "plain",
|
|
className = "",
|
|
contentClassName = "",
|
|
...props
|
|
}: FormSectionProps) {
|
|
const { translateText } = usePlatformLanguage();
|
|
|
|
return (
|
|
<section {...props} className={["form-section-layout", `form-section-${variant}`, className].filter(Boolean).join(" ")}>
|
|
{(title || description || actions) && (
|
|
<header className="form-section-header">
|
|
<div className="form-section-heading-copy">
|
|
{title && <h3>{translateReactNode(title, translateText)}</h3>}
|
|
{description && <div className="form-section-description">{translateReactNode(description, translateText)}</div>}
|
|
</div>
|
|
{actions && <div className="form-section-actions">{translateReactNode(actions, translateText)}</div>}
|
|
</header>
|
|
)}
|
|
<div className={["form-section-content", contentClassName].filter(Boolean).join(" ")}>{children}</div>
|
|
</section>
|
|
);
|
|
}
|