Install Breeze

resources/js/Components/TextInput.tsx

@@ -0,0 +1,41 @@
+import {
+    forwardRef,
+    InputHTMLAttributes,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+} from 'react';
+
+export default forwardRef(function TextInput(
+    {
+        type = 'text',
+        className = '',
+        isFocused = false,
+        ...props
+    }: InputHTMLAttributes<HTMLInputElement> & { isFocused?: boolean },
+    ref,
+) {
+    const localRef = useRef<HTMLInputElement>(null);
+
+    useImperativeHandle(ref, () => ({
+        focus: () => localRef.current?.focus(),
+    }));
+
+    useEffect(() => {
+        if (isFocused) {
+            localRef.current?.focus();
+        }
+    }, [isFocused]);
+
+    return (
+        <input
+            {...props}
+            type={type}
+            className={
+                'rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 ' +
+                className
+            }
+            ref={localRef}
+        />
+    );
+});