wallet-core/packages/aml-backoffice-ui/src/handlers/Caption.tsx
2023-06-05 10:04:09 -03:00

36 lines
931 B
TypeScript

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>
);
}