diff options
author | Sebastian <sebasjm@gmail.com> | 2023-09-20 15:16:28 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-09-25 14:50:39 -0300 |
commit | fdbe623e1060efc4b074d213a96e8f5a2ab7498b (patch) | |
tree | 6bbe00f6f36f1910ea99180a6e0d5c53aeb9f34f /packages/web-util/src/forms/Caption.tsx | |
parent | a5406c5a5dc437e036168eb068db11d88e05bb0f (diff) |
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.tsx | 32 |
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> + ); +} |