Add new Frontend

frontend/src/components/ui/Input.tsx

@@ -0,0 +1,54 @@
+// src/components/ui/Input.tsx
+import React from 'react';
+import { clsx } from 'clsx';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+}
+
+const Input: React.FC<InputProps> = ({
+  label,
+  error,
+  helperText,
+  className,
+  id,
+  ...props
+}) => {
+  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="block text-sm font-medium text-gray-700 mb-2"
+        >
+          {label}
+        </label>
+      )}
+      <input
+        id={inputId}
+        className={clsx(
+          'w-full px-4 py-3 border rounded-xl transition-all duration-200',
+          'placeholder-gray-400 text-gray-900',
+          'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500',
+          error
+            ? 'border-red-300 bg-red-50'
+            : 'border-gray-300 hover:border-gray-400',
+          className
+        )}
+        {...props}
+      />
+      {error && (
+        <p className="mt-1 text-sm text-red-600">{error}</p>
+      )}
+      {helperText && !error && (
+        <p className="mt-1 text-sm text-gray-500">{helperText}</p>
+      )}
+    </div>
+  );
+};
+
+export default Input;