67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import type { TextInputProps } from "$/types/InputTypes";
|
|
import clsx from "clsx";
|
|
import { useId } from "react";
|
|
|
|
|
|
export default function TextInput({
|
|
id,
|
|
className,
|
|
inputClassName,
|
|
labelClassName,
|
|
name,
|
|
maxLength,
|
|
spellCheck,
|
|
placeholder,
|
|
value,
|
|
onChange,
|
|
onKeyDown,
|
|
disabled
|
|
}: Readonly<TextInputProps>){
|
|
const componentId = useId();
|
|
const activeId = id ?? componentId;
|
|
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"flex flex-row items-center justify-center rounded-lg border-2 w-full",
|
|
className
|
|
)}
|
|
>
|
|
<div
|
|
className="relative flex flex-row items-center justify-center px-2 py-1 w-full"
|
|
>
|
|
<input
|
|
type="text"
|
|
id={activeId}
|
|
className={clsx(
|
|
"peer bg-transparent outline-none placeholder-transparent w-full",
|
|
inputClassName
|
|
)}
|
|
name={name}
|
|
placeholder={placeholder}
|
|
maxLength={maxLength}
|
|
value={value}
|
|
onChange={(e) => onChange?.(e.target.value)}
|
|
disabled={disabled}
|
|
spellCheck={spellCheck}
|
|
onKeyDown={onKeyDown}
|
|
/>
|
|
<label
|
|
className={clsx(
|
|
"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
|
|
"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:h-full peer-placeholder-shown:cursor-text peer-placeholder-shown:w-[98%]",
|
|
"peer-focus:-top-3 peer-focus:left-0 peer-focus:text-sm peer-focus:w-auto peer-focus:h-auto",
|
|
"flex items-center",
|
|
labelClassName
|
|
)}
|
|
style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
|
|
htmlFor={activeId}
|
|
>
|
|
{placeholder}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|