packages/ui/input/labeled-input.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
33
34
35
36
37
38
39
40
41
42

import { cn } from "@lib/utils";
import { Input } from "@ui/components/input";
import { Label1Regular } from "@ui/text/label/label-1-regular";

interface LabeledInputProps extends React.ComponentProps<"div"> {
	label: string;
	inputType: string;
	inputPlaceholder: string;
	error?: string | null;
	inputProps?: React.ComponentProps<typeof Input>;
}

export function LabeledInput({
	label,
	inputType,
	inputPlaceholder,
	className,
	error,
	inputProps,
	...props
}: LabeledInputProps) {
	return (
		<div className={cn("flex flex-col gap-2", className)} {...props}>
			<Label1Regular className="text-foreground">{label}</Label1Regular>

			<Input
				className={cn(
					"w-full leading-[1.375rem] tracking-[-0.4px] rounded-2xl p-5 placeholder:text-muted-foreground text-foreground border-[1.5px] border-border disabled:cursor-not-allowed disabled:opacity-50",
					inputProps?.className,
				)}
				placeholder={inputPlaceholder}
				type={inputType}
				{...inputProps}
			/>
			{error && (
				<p className="text-sm text-red-500" role="alert">
					{error}
				</p>
			)}
		</div>
	);
}