92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
import clsx from "clsx";
|
|
import {useState} from "react";
|
|
|
|
interface Props {
|
|
type: "email" | "text" | "password" | "tel" | "number";
|
|
roundness?: "full" | "xl";
|
|
required?: boolean;
|
|
label?: string;
|
|
placeholder?: string;
|
|
defaultValue?: string | number;
|
|
value?: string | number;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
max?: number;
|
|
name: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
export default function Input({
|
|
type,
|
|
label,
|
|
placeholder,
|
|
name,
|
|
required = false,
|
|
value,
|
|
defaultValue,
|
|
max,
|
|
className,
|
|
roundness = "full",
|
|
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}
|
|
value={value}
|
|
max={max}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
min={type === "number" ? 0 : undefined}
|
|
placeholder={placeholder}
|
|
className={clsx(
|
|
"px-8 py-6 text-sm font-normal bg-white border border-mti-gray-platinum focus:outline-none",
|
|
"placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed",
|
|
roundness === "full" ? "rounded-full" : "rounded-xl",
|
|
)}
|
|
required={required}
|
|
defaultValue={defaultValue}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|