Added new label input component
This commit is contained in:
parent
1d44fc4658
commit
d77c3d2ea2
1 changed files with 40 additions and 0 deletions
40
frontend/components/label-input.tsx
Normal file
40
frontend/components/label-input.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue