hamid zarghami
31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import { SearchNormal } from "iconsax-reactjs";
|
|
import { forwardRef } from "react";
|
|
|
|
export type InputVariant = "primary" | "search";
|
|
|
|
type Props = {
|
|
variant?: InputVariant;
|
|
} & React.InputHTMLAttributes<HTMLInputElement>;
|
|
|
|
const Input = forwardRef<HTMLInputElement, Props>(({ variant = "search", className, type, ...props }, ref) => {
|
|
const isSearch = variant === "search";
|
|
|
|
return (
|
|
<div className="relative w-full" dir="rtl">
|
|
{isSearch && <SearchNormal aria-hidden="true" className="pointer-events-none absolute top-1/2 right-5 -translate-y-1/2 text-primary" color="currentColor" size={24} />}
|
|
<input
|
|
ref={ref}
|
|
type={type ?? (isSearch ? "search" : "text")}
|
|
className={`h-12 w-full rounded-2xl border border-secondary bg-white px-5 text-right text-sm text-[#3A4147] placeholder:text-[#D7E0E8] transition-colors focus:border-primary ${
|
|
isSearch ? "pr-13" : ""
|
|
} ${className ?? ""}`}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
Input.displayName = "Input";
|
|
|
|
export default Input;
|