50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { cn } from "@/utils/class-merge";
|
|
import { forwardRef, HTMLProps, useEffect } from "preact/compat";
|
|
import { tv } from "tailwind-variants";
|
|
import classes from "./Input.module.scss";
|
|
|
|
const input = tv({
|
|
base: classes.input_field,
|
|
variants: {
|
|
"text-align": {
|
|
center: "text-center",
|
|
left: "text-left",
|
|
},
|
|
"border-error": {
|
|
true: "border-red-500 placeholder:text-red-500",
|
|
false: "border-gray-300",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
"text-align": "left",
|
|
},
|
|
});
|
|
|
|
interface InputProps extends HTMLProps<HTMLInputElement> {
|
|
textAlign?: "center" | "left";
|
|
error?: string;
|
|
}
|
|
|
|
const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
|
const { textAlign, error, type = "text", ...rest } = props;
|
|
useEffect(() => {
|
|
console.log(`error: ${error}`);
|
|
}, [error]);
|
|
return (
|
|
<div class="flex w-full flex-col items-center gap-1">
|
|
<input class={input({ "text-align": textAlign, "border-error": !!error })} ref={ref} type={type} {...rest} />
|
|
<p
|
|
class={cn("invisible h-10 w-[80%] text-center text-[0.7rem] break-words text-red-500", {
|
|
visible: error !== "",
|
|
})}
|
|
>
|
|
{error}
|
|
</p>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
Input.displayName = "AHInput";
|
|
|
|
export default Input;
|