diff options
author | Özgür Kesim <oec-taler@kesim.org> | 2023-10-06 16:33:05 +0200 |
---|---|---|
committer | Özgür Kesim <oec-taler@kesim.org> | 2023-10-06 16:33:05 +0200 |
commit | fe7b51ef2736edbf04f5bbd9d19f2a2d04baccc2 (patch) | |
tree | 66c68c8d6a666f6e74dc663c9ee4f07879f6626c /packages/web-util/src/forms/Caption.tsx | |
parent | 35611f0bf9cf67638b171c2a300fab1797d3d8f0 (diff) | |
parent | 97d7be7503168f4f3bbd05905d32aa76ca1636b2 (diff) |
Merge branch 'master' into age-withdraw
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> + ); +} |