Alihaghighattalab
25 lines
1.0 KiB
TypeScript
25 lines
1.0 KiB
TypeScript
import { Eye, EyeSlash } from "iconsax-react"
|
|
import React, { FC, useState } from "react"
|
|
import { Input as InputComponent } from '@headlessui/react'
|
|
|
|
type Props = {
|
|
type?: React.HTMLInputTypeAttribute,
|
|
placeholder: string,
|
|
icon?: React.ReactNode,
|
|
field?: any
|
|
}
|
|
|
|
export const Input: FC<Props> = ({ placeholder, type = "text", icon, field }) => {
|
|
const [hidden, setHidden] = useState<boolean>(false)
|
|
const handleHidden = () => setHidden(prev => !prev)
|
|
return (
|
|
<div className={`relative w-full`}>
|
|
<div className="absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center text-blue-gray-500">
|
|
{type === "password" ?
|
|
!hidden ? <Eye size="23" color="#777577" onClick={handleHidden} /> : <EyeSlash size="23" color="#777577" onClick={handleHidden} />
|
|
: icon}
|
|
</div>
|
|
<InputComponent {...field} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className="input-style min-w-full" />
|
|
</div>
|
|
)
|
|
} |