input-icon

1import { cn } from "@/lib/utils";
2import { LucideIcon } from "lucide-react";
3import * as React from "react";
4 
5export interface InputProps
6  extends React.InputHTMLAttributes<HTMLInputElement> {
7  startIcon?: LucideIcon;
8  endIcon?: LucideIcon;
9}
10 
11const InputIcon = React.forwardRef<HTMLInputElement, InputProps>(
12  ({ className, endIcon, startIcon, type, ...props }, ref) => {
13    const StartIcon = startIcon;
14    const EndIcon = endIcon;
15 
16    return (
17      <div className="relative w-full">
18        {StartIcon && (
19          <div className="absolute top-1/2 left-2 -translate-y-1/2 transform">
20            <StartIcon size={18} className="text-muted-foreground" />
21          </div>
22        )}
23        <input
24          type={type}
25          className={cn(
26            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
27            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
28            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
29            startIcon ? "pl-8" : "",
30            endIcon ? "pr-8" : "",
31            className
32          )}
33          ref={ref}
34          {...props}
35        />
36        {EndIcon && (
37          <div className="absolute top-1/2 right-2 -translate-y-1/2 transform">
38            <EndIcon className="text-muted-foreground" size={18} />
39          </div>
40        )}
41      </div>
42    );
43  }
44);
45 
46InputIcon.displayName = "InputIcon";
47 
48export default InputIcon;