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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 49x 9176x 9176x 9176x 9176x 9176x 49x | import { LucideIcon } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
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;
const isNavBarInput = divClassName === "left-nav-bar-search-input";
const baseClassName =
"flex h-9 w-full text-sm bg-[var(--background)] 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";
// TODO: Refactor the entire code for input element
return (
<div className={cn("w-full relative", divClassName)}>
{StartIcon && (
<div
className={cn(
isNavBarInput ? "left-3 top-[55%]" : "left-1.5 top-1/2",
"absolute transform -translate-y-1/2",
)}
>
<StartIcon
className={cn(
isNavBarInput ? "icon-large" : "",
"text-muted-foreground",
)}
/>
</div>
)}
{/* TODO: need to remove duplicate code in className */}
<input
type={type}
onWheel={(e) => e.currentTarget.blur()}
className={cn(
divClassName === "search-input"
? "2xl:h-8 text-[13px]"
: "border-b-[1px] border-slate-500 border-input py-2 px-4",
isNavBarInput
? "border-none font-normal ml-6"
: "border-b-[1px] border-slate-500 border-input py-2 px-4",
startIcon ? "pl-8" : "",
endIcon ? "pr-8" : "",
baseClassName,
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 };
|