40 lines
1,000 B
TypeScript
40 lines
1,000 B
TypeScript
import { Info } from "lucide-react";
|
|
import { Input } from "./ui/input";
|
|
import { Label } from "./ui/label";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
|
|
|
|
export function LabelInput({
|
|
label,
|
|
helperText,
|
|
id,
|
|
required,
|
|
...props
|
|
}: {
|
|
label: string;
|
|
helperText: string;
|
|
id: string;
|
|
required: boolean;
|
|
} & React.InputHTMLAttributes<HTMLInputElement>) {
|
|
return (
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor={id}
|
|
className="text-mmd font-medium flex items-center gap-1"
|
|
>
|
|
{label}
|
|
{required && <span className="text-red-500">*</span>}
|
|
{helperText && (
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<Info className="w-3.5 h-3.5 text-muted-foreground" />
|
|
</TooltipTrigger>
|
|
<TooltipContent>{helperText}</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</Label>
|
|
<div className="relative">
|
|
<Input id={id} {...props} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|