67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import { HelpCircle } from "lucide-react";
|
|
import { Label } from "./ui/label";
|
|
import { Textarea } from "./ui/textarea";
|
|
import { Input } from "./ui/input";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function EditableField({
|
|
label,
|
|
value,
|
|
onChange,
|
|
type = "text",
|
|
helpText,
|
|
required,
|
|
multiline = false,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
type?: string;
|
|
helpText?: string;
|
|
required?: boolean;
|
|
multiline?: boolean;
|
|
}) {
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Label htmlFor={label} className="text-sm font-medium">
|
|
{label}
|
|
{required && <span className="text-red-500">*</span>}
|
|
</Label>
|
|
{helpText && (
|
|
<div className="relative flex items-center">
|
|
<HelpCircle className="h-4 w-4 text-tertiary" />
|
|
<span className="sr-only">{helpText}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{multiline ? (
|
|
<Textarea
|
|
id={label}
|
|
value={value}
|
|
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
|
|
onChange(e.target.value)
|
|
}
|
|
className={cn(
|
|
"w-full resize-none",
|
|
required && !value && "border-red-500",
|
|
)}
|
|
placeholder={`Enter ${label.toLowerCase()}`}
|
|
rows={4}
|
|
/>
|
|
) : (
|
|
<Input
|
|
id={label}
|
|
type={type}
|
|
value={value}
|
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
|
onChange(e.target.value)
|
|
}
|
|
className={cn("w-full", required && !value && "border-red-500")}
|
|
placeholder={`Enter ${label.toLowerCase()}`}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|