mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-12-17 11:21:35 +03:00
2f68b445db
Issue https://github.com/StanGirard/quivr/issues/1908 Demo: https://github.com/StanGirard/quivr/assets/63923024/3be5d58c-4052-4c06-8434-920d4db0365e
67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import {
|
|
DetailedHTMLProps,
|
|
forwardRef,
|
|
InputHTMLAttributes,
|
|
RefObject,
|
|
} from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface FieldProps
|
|
extends DetailedHTMLProps<
|
|
InputHTMLAttributes<HTMLInputElement>,
|
|
HTMLInputElement
|
|
> {
|
|
label?: string;
|
|
name: string;
|
|
icon?: React.ReactNode;
|
|
inputClassName?: string;
|
|
}
|
|
|
|
const Field = forwardRef(
|
|
(
|
|
{
|
|
label,
|
|
className,
|
|
name,
|
|
inputClassName,
|
|
required = false,
|
|
icon,
|
|
...props
|
|
}: FieldProps,
|
|
forwardedRef
|
|
) => {
|
|
return (
|
|
<fieldset className={cn("flex flex-col w-full", className)} name={name}>
|
|
{label !== undefined && (
|
|
<label htmlFor={name} className="text-sm font-semibold mb-2">
|
|
{label}
|
|
{required && <span>*</span>}
|
|
</label>
|
|
)}
|
|
<div className="relative">
|
|
<input
|
|
ref={forwardedRef as RefObject<HTMLInputElement>}
|
|
className={cn(
|
|
`w-full bg-gray-50 dark:bg-gray-900 px-4 py-2 border rounded-md border-black/10 dark:border-white/25`,
|
|
icon !== undefined ? "pr-12" : "",
|
|
inputClassName
|
|
)}
|
|
name={name}
|
|
id={name}
|
|
{...props}
|
|
/>
|
|
{icon !== undefined && (
|
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</fieldset>
|
|
);
|
|
}
|
|
);
|
|
Field.displayName = "Field";
|
|
|
|
export default Field;
|