generated from muhtadeetaron/nextjs-template
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import React, { useState } from "react";
|
|
|
|
const FormField = ({
|
|
title,
|
|
placeholder,
|
|
value,
|
|
handleChangeText,
|
|
...props
|
|
}) => {
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
const isPasswordField = title === "Password" || title === "Confirm Password";
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<label
|
|
className="block mb-2"
|
|
style={{
|
|
color: "#666666",
|
|
fontFamily: "Montserrat, sans-serif",
|
|
fontWeight: "500",
|
|
fontSize: 18,
|
|
marginBottom: 8,
|
|
letterSpacing: "-0.5px",
|
|
}}
|
|
>
|
|
{title}
|
|
</label>
|
|
|
|
<div
|
|
className="h-16 px-4 bg-blue-200 rounded-3xl flex items-center justify-between"
|
|
style={{
|
|
height: 64,
|
|
paddingLeft: 16,
|
|
paddingRight: 16,
|
|
backgroundColor: "#D2DFF0",
|
|
borderRadius: 20,
|
|
}}
|
|
>
|
|
<input
|
|
type={isPasswordField && !showPassword ? "password" : "text"}
|
|
value={value}
|
|
placeholder={placeholder}
|
|
onChange={(e) => handleChangeText(e.target.value)}
|
|
className="flex-1 bg-transparent outline-none border-none text-blue-950"
|
|
style={{
|
|
color: "#0D47A1",
|
|
fontSize: 16,
|
|
fontFamily: "inherit",
|
|
backgroundColor: "transparent",
|
|
border: "none",
|
|
outline: "none",
|
|
}}
|
|
{...props}
|
|
/>
|
|
|
|
{isPasswordField && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="ml-2 text-gray-600 hover:text-gray-800 focus:outline-none"
|
|
style={{
|
|
fontFamily: "Montserrat, sans-serif",
|
|
fontWeight: "500",
|
|
fontSize: 16,
|
|
background: "none",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
padding: 0,
|
|
}}
|
|
>
|
|
{showPassword ? "Hide" : "Show"}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FormField;
|