41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { cn } from "@/lib/utils";
|
|
import { WidgetComponent } from "@/types/screen";
|
|
|
|
interface InputWidgetProps {
|
|
widget: WidgetComponent;
|
|
value?: string;
|
|
onChange?: (value: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export default function InputWidget({ widget, value, onChange, className }: InputWidgetProps) {
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
onChange?.(e.target.value);
|
|
};
|
|
|
|
return (
|
|
<div className={cn("space-y-2", className)}>
|
|
{widget.label && (
|
|
<Label htmlFor={widget.id} className="text-sm font-medium">
|
|
{widget.label}
|
|
{widget.required && <span className="ml-1 text-red-500">*</span>}
|
|
</Label>
|
|
)}
|
|
<Input
|
|
id={widget.id}
|
|
type={widget.widgetType === "number" ? "number" : "text"}
|
|
placeholder={widget.placeholder}
|
|
value={value || ""}
|
|
onChange={handleChange}
|
|
required={widget.required}
|
|
readOnly={widget.readonly}
|
|
className={cn("w-full", widget.readonly && "cursor-not-allowed bg-gray-50")}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|