input-with-adornment.tsx raw

   1  import * as React from "react";
   2  import { Input } from "src/components/ui/input";
   3  import { cn } from "src/lib/utils";
   4  
   5  export interface InputWithAdornmentProps extends React.ComponentProps<"input"> {
   6    endAdornment: React.ReactNode;
   7  }
   8  
   9  const InputWithAdornment = React.forwardRef<
  10    HTMLInputElement,
  11    InputWithAdornmentProps
  12  >(({ className, type, endAdornment, ...props }, ref) => {
  13    return (
  14      <div className="relative flex items-center w-full">
  15        <Input
  16          type={type}
  17          ref={ref}
  18          className={cn(
  19            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
  20            className
  21          )}
  22          {...props}
  23        />
  24        {endAdornment && (
  25          <span className="absolute right-1 flex items-center">
  26            {endAdornment}
  27          </span>
  28        )}
  29      </div>
  30    );
  31  });
  32  
  33  InputWithAdornment.displayName = "InputWithAdornment";
  34  
  35  export { InputWithAdornment };
  36