Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 33x 3859x 3859x 3859x 33x | import * as React from "react";
import { cn } from "@/lib/utils";
import { LucideIcon } from "lucide-react";
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {
startIcon?: LucideIcon;
endIcon?: LucideIcon;
divClassName?: string;
handleBlur?: () => void;
}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
(
{ className, type, startIcon, readOnly, endIcon, divClassName, ...props },
ref,
) => {
const StartIcon = startIcon;
const EndIcon = endIcon;
return (
<div className={cn("w-full relative", divClassName)}>
{StartIcon && (
<div className="absolute left-1.5 top-1/2 transform -translate-y-1/2">
<StartIcon size={18} className="text-muted-foreground" />
</div>
)}
<input
type={type}
onWheel={(e) => e.currentTarget.blur()}
className={cn(
"flex h-9 w-full border-b-[1px] border-slate-500 border-input bg-[var(--background)] py-2 px-4 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-b-2 focus-visible:border-b-primary disabled:cursor-not-allowed disabled:opacity-70",
startIcon ? "pl-8" : "",
endIcon ? "pr-8" : "",
className,
)}
ref={ref}
{...props}
/>
{EndIcon && (
<div className="absolute right-3 top-1/2 transform -translate-y-1/2">
<EndIcon className="text-muted-foreground" size={18} />
</div>
)}
</div>
);
},
);
Input.displayName = "Input";
export { Input };
|