69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import clsx from "clsx";
|
|
import {useState} from "react";
|
|
|
|
interface Props {
|
|
type: "email" | "text" | "password" | "tel";
|
|
required?: boolean;
|
|
label?: string;
|
|
placeholder?: string;
|
|
defaultValue?: string;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
name: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
export default function Input({type, label, placeholder, name, required = false, defaultValue, className, disabled = 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}
|
|
defaultValue={defaultValue}
|
|
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={clsx("flex flex-col gap-3 w-full", className)}>
|
|
{label && (
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
{label}
|
|
{required ? " *" : ""}
|
|
</label>
|
|
)}
|
|
<input
|
|
type={type}
|
|
name={name}
|
|
disabled={disabled}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
|
|
required={required}
|
|
defaultValue={defaultValue}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|