From fd2ba1e220c18522ef3052f3bd6190a0cfd39fe7 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Fri, 20 Dec 2024 18:11:36 +0100
Subject: [PATCH] UI: init FieldLayout wrapper

---
 .../webview-ui/app/src/Form/fields/layout.tsx | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 pkgs/webview-ui/app/src/Form/fields/layout.tsx

diff --git a/pkgs/webview-ui/app/src/Form/fields/layout.tsx b/pkgs/webview-ui/app/src/Form/fields/layout.tsx
new file mode 100644
index 000000000..3a9a4dd70
--- /dev/null
+++ b/pkgs/webview-ui/app/src/Form/fields/layout.tsx
@@ -0,0 +1,29 @@
+import { JSX, splitProps } from "solid-js";
+import cx from "classnames";
+
+interface LayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  field?: JSX.Element;
+  label?: JSX.Element;
+  error?: JSX.Element;
+}
+export const FieldLayout = (props: LayoutProps) => {
+  const [intern, divProps] = splitProps(props, [
+    "field",
+    "label",
+    "error",
+    "class",
+  ]);
+  return (
+    <div
+      class={cx("grid grid-cols-12 items-center", intern.class)}
+      classList={{
+        "mb-[14.5px]": !props.error,
+      }}
+      {...divProps}
+    >
+      <label class="col-span-2">{props.label}</label>
+      <div class="col-span-10">{props.field}</div>
+      {props.error && <span class="col-span-full">{props.error}</span>}
+    </div>
+  );
+};