62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import {useState} from "react";
|
|
|
|
interface Props {
|
|
type: "email" | "text" | "password";
|
|
required?: boolean;
|
|
label?: string;
|
|
placeholder?: string;
|
|
name: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
export default function Input({type, label, placeholder, name, required = false, onChange}: Props) {
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
if (type === "password") {
|
|
return (
|
|
<div className="relative flex flex-col gap-3 w-full">
|
|
{label && (
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
{label}
|
|
{required ? " *" : ""}
|
|
</label>
|
|
)}
|
|
<div className="w-full h-fit relative">
|
|
<input
|
|
type={showPassword ? "text" : "password"}
|
|
name={name}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
|
|
/>
|
|
<p
|
|
role="button"
|
|
onClick={() => setShowPassword((prev) => !prev)}
|
|
className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
|
|
{showPassword ? "Hide" : "Show"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 w-full">
|
|
{label && (
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
{label}
|
|
{required ? " *" : ""}
|
|
</label>
|
|
)}
|
|
<input
|
|
type={type}
|
|
name={name}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
|
|
required={required}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|