Add shared WebUI layout primitives

2026-08-18 10:42:55 +02:00
parent dd7ad4d9c7
commit 6814a41ae4
22 changed files with 574 additions and 111 deletions
@@ -0,0 +1,41 @@
+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>
+  );
+}