hamid zarghami
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { cn } from "@/app/lib/cn";
|
|
import { SearchNormal } from "iconsax-reactjs";
|
|
import { FC } from "react";
|
|
|
|
export type InputVariant = "primary" | "search";
|
|
|
|
type Props = {
|
|
variant?: InputVariant;
|
|
className?: string;
|
|
iconClassName?: string;
|
|
} & React.InputHTMLAttributes<HTMLInputElement>;
|
|
|
|
const Input: FC<Props> = ({ variant = "primary", className, iconClassName, ...rest }) => {
|
|
return (
|
|
<div className="relative w-full" dir="rtl">
|
|
{variant === "search" && (
|
|
<SearchNormal
|
|
aria-hidden="true"
|
|
className={cn("pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-primary", iconClassName)}
|
|
color="currentColor"
|
|
size={20}
|
|
/>
|
|
)}
|
|
<input
|
|
type={variant === "search" ? "search" : rest.type}
|
|
className={cn(
|
|
"h-10 w-full rounded-2xl border border-secondary bg-white px-4 text-right text-sm text-[#3A4147] placeholder:text-[#D7E0E8] transition-colors focus:border-primary",
|
|
variant === "search" && "pr-11",
|
|
className,
|
|
)}
|
|
{...rest}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Input;
|