aboutsummaryrefslogtreecommitdiff
path: root/packages/web-util/src/forms/Caption.tsx
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2023-09-20 15:16:28 -0300
committerSebastian <sebasjm@gmail.com>2023-09-25 14:50:39 -0300
commitfdbe623e1060efc4b074d213a96e8f5a2ab7498b (patch)
tree6bbe00f6f36f1910ea99180a6e0d5c53aeb9f34f /packages/web-util/src/forms/Caption.tsx
parenta5406c5a5dc437e036168eb068db11d88e05bb0f (diff)
downloadwallet-core-fdbe623e1060efc4b074d213a96e8f5a2ab7498b.tar.xz
more ui stuff, moved forms to util
Diffstat (limited to 'packages/web-util/src/forms/Caption.tsx')
-rw-r--r--packages/web-util/src/forms/Caption.tsx32
1 files changed, 32 insertions, 0 deletions
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>
+ );
+}