1 files changed, 35 insertions, 0 deletions
diff --git a/packages/aml-backoffice-ui/src/handlers/Caption.tsx b/packages/aml-backoffice-ui/src/handlers/Caption.tsx
new file mode 100644
index 000000000..fbf154d89
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/Caption.tsx
@@ -0,0 +1,35 @@
+import { VNode, h } from "preact";
+import {
+  IconAddon,
+  InputLine,
+  LabelWithTooltipMaybeRequired,
+  UIFormProps,
+} from "./InputLine.js";
+import { TranslatedString } from "@gnu-taler/taler-util";
+
+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>
+  );
+}