31 lines
830 B
TypeScript
31 lines
830 B
TypeScript
import { motion, type HTMLMotionProps } from "motion/react";
|
|
import clsx, { type ClassValue } from "clsx";
|
|
import type { FocusEvent } from "react";
|
|
|
|
import classes from "./TextAreaInput.module.css";
|
|
|
|
type Props = Omit<HTMLMotionProps<"textarea">, "className"> & {
|
|
className?: ClassValue;
|
|
error?: boolean;
|
|
};
|
|
|
|
export default function TextAreaInput({ className, error, onFocus, ...props }: Props) {
|
|
const handleFocus = (e: FocusEvent<HTMLTextAreaElement>) => {
|
|
onFocus?.(e);
|
|
const target = e.target;
|
|
setTimeout(() => {
|
|
if (target.isConnected) {
|
|
target.scrollIntoView({ block: "center", behavior: "smooth" });
|
|
}
|
|
}, 100);
|
|
};
|
|
|
|
return (
|
|
<motion.textarea
|
|
{...props}
|
|
onFocus={handleFocus}
|
|
className={clsx(classes.input, error && classes.error, className)}
|
|
/>
|
|
);
|
|
}
|