From fdbe623e1060efc4b074d213a96e8f5a2ab7498b Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 20 Sep 2023 15:16:28 -0300
Subject: more ui stuff, moved forms to util

---
 packages/web-util/src/forms/Caption.tsx | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 packages/web-util/src/forms/Caption.tsx

(limited to 'packages/web-util/src/forms/Caption.tsx')

diff --git a/packages/web-util/src/forms/Caption.tsx b/packages/web-util/src/forms/Caption.tsx
new file mode 100644
index 000000000..8facddec3
--- /dev/null
+++ b/packages/web-util/src/forms/Caption.tsx
@@ -0,0 +1,32 @@
+import { TranslatedString } from "@gnu-taler/taler-util";
+import { VNode, h } from "preact";
+import {
+  LabelWithTooltipMaybeRequired
+} from "./InputLine.js";
+
+interface Props {
+  label: TranslatedString;
+  tooltip?: TranslatedString;
+  help?: TranslatedString;
+  before?: VNode;
+  after?: VNode;
+}
+
+export function Caption({ before, after, label, tooltip, help }: Props): VNode {
+  return (
+    <div class="sm:col-span-6 flex">
+      {before !== undefined && (
+        <span class="pointer-events-none flex items-center pr-2">{before}</span>
+      )}
+      <LabelWithTooltipMaybeRequired label={label} tooltip={tooltip} />
+      {after !== undefined && (
+        <span class="pointer-events-none flex items-center pl-2">{after}</span>
+      )}
+      {help && (
+        <p class="mt-2 text-sm text-gray-500" id="email-description">
+          {help}
+        </p>
+      )}
+    </div>
+  );
+}
-- 
cgit v1.2.3