blob: f63fa4a9b45d71d608518b57a7d489c8d356a059 (
plain)
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
33
34
35
36
37
38
39
40
41
42
43
44
|
import { TranslatedString } from "@gnu-taler/taler-util";
import { VNode, h } from "preact";
import { LabelWithTooltipMaybeRequired, RenderAddon } from "./InputLine.js";
import { RenderAllFieldsByUiConfig, UIFormField, convertUiField } from "./forms.js";
import { Addon, FormProvider } from "./FormProvider.js";
import { useField } from "./useField.js";
import { useTranslationContext } from "../index.browser.js";
import { getConverterById } from "./converter.js";
interface Props {
label: TranslatedString;
tooltip?: TranslatedString;
help?: TranslatedString;
before?: Addon;
after?: Addon;
fields: UIFormField[];
}
export function Group({
before,
after,
label,
tooltip,
help,
fields,
}: Props): VNode {
return (
<div class="sm:col-span-6 p-4 rounded-lg border-r-2 border-2 bg-gray-50">
{before !== undefined && <RenderAddon addon={before} />}
<LabelWithTooltipMaybeRequired label={label} tooltip={tooltip} />
{after !== undefined && <RenderAddon addon={after} />}
{help && (
<p class="mt-2 text-sm text-gray-500" id="email-description">
{help}
</p>
)}
<div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-6">
<RenderAllFieldsByUiConfig
fields={fields}
/>
</div>
</div>
);
}
|