first commit

src/components/forms/FormInput.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef } from "react";
+
+interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  error?: string;
+  multiline?: boolean;
+}
+
+export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
+  ({ label, error, className = "", multiline, ...props }, ref) => {
+    const Component = multiline ? 'textarea' : 'input';
+    
+    return (
+      <div className={`${className} relative`}>
+        <label className="block text-sm font-semibold text-gray-700 mb-2">
+          {label}
+          {props.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <Component
+          ref={ref}
+          className={`
+            w-full px-4 py-3 rounded-lg
+            border border-gray-300
+            bg-white text-gray-900
+            transition duration-150 ease-in-out
+            placeholder-gray-400
+            focus:ring-2 focus:ring-blue-500 focus:border-transparent
+            hover:border-gray-400
+            ${error ? "border-red-300 focus:ring-red-500" : ""}
+          `}
+          {...props}
+        />
+        {error && (
+          <div className="absolute -bottom-5 left-0">
+            <p className="text-xs text-red-500">{error}</p>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+FormInput.displayName = "FormInput";