packages/web-util/src/forms/Caption.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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>
  );
}