131 lines
3.7 KiB
TypeScript
131 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { FloatingLabelInputProps } from '#/types';
|
|
import React, { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import { icons } from '#/assets/icons';
|
|
|
|
export default function FloatingLabelInput({
|
|
label,
|
|
placeholder,
|
|
type,
|
|
options,
|
|
button,
|
|
showPasswordToggle = false,
|
|
name,
|
|
defaultValue,
|
|
onChange,
|
|
}: FloatingLabelInputProps) {
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const value = e.target.value;
|
|
if (onChange) {
|
|
onChange(value);
|
|
}
|
|
};
|
|
|
|
|
|
const renderInput = () => {
|
|
switch(type) {
|
|
case 'select':
|
|
return (
|
|
<div className="relative w-full">
|
|
<select
|
|
className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
|
|
name={name}
|
|
defaultValue={defaultValue}
|
|
>
|
|
{options?.map((option, index) => (
|
|
<option key={index} value={option}>{option}</option>
|
|
))}
|
|
</select>
|
|
{button && <div className="btn-floating-right">{button}</div>}
|
|
</div>
|
|
);
|
|
|
|
case 'password':
|
|
return (
|
|
<div className="relative w-full">
|
|
<input
|
|
name={name}
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder={placeholder}
|
|
className="input-form focus:ring-2 focus:ring-blue-500 pr-10 outline-none"
|
|
defaultValue={defaultValue}
|
|
|
|
/>
|
|
{showPasswordToggle && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="btn-floating-right text-gray-500 hover:text-gray-700 focus:outline-none"
|
|
>
|
|
{showPassword ? (
|
|
<Image
|
|
src={icons.eyeSlashIcon}
|
|
width={20}
|
|
height={20}
|
|
alt=''
|
|
/>
|
|
) : (
|
|
<Image
|
|
src={icons.eyeIcon}
|
|
width={20}
|
|
height={20}
|
|
alt=''
|
|
/>
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
|
|
case 'search':
|
|
return (
|
|
<div className="relative w-full">
|
|
<div className='btn-floating-left'>
|
|
<Image alt='' src={icons.searchIcon} />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
placeholder={placeholder}
|
|
className="focus:ring-2 focus:ring-blue-500 outline-none px-10 py-3 w-full text-black border border-[#d1d5dc] rounded-full"
|
|
name={name}
|
|
defaultValue={defaultValue}
|
|
onChange={handleChange}
|
|
/>
|
|
{button && <div className="btn-floating-right">{button}</div>}
|
|
</div>
|
|
);
|
|
|
|
default:
|
|
return (
|
|
<div className="relative w-full">
|
|
<input
|
|
type={type}
|
|
placeholder={placeholder}
|
|
className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
|
|
name={name}
|
|
defaultValue={defaultValue}
|
|
onChange={handleChange}
|
|
/>
|
|
{button && <div className="btn-floating-right">{button}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="relative">
|
|
<label
|
|
htmlFor={name}
|
|
className="input-label text-gray-400 text-sm"
|
|
>
|
|
{label}
|
|
</label>
|
|
{renderInput()}
|
|
</div>
|
|
);
|
|
} |