feat(frontend): implement basic UI foundation (Issue #6)

frontend/src/components/ui/Input.tsx

@@ -0,0 +1,41 @@
+import { InputHTMLAttributes, forwardRef } from 'react'
+import { clsx } from 'clsx'
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  error?: string
+  helperText?: string
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, helperText, className, ...props }, ref) => {
+    return (
+      <div className="w-full">
+        {label && (
+          <label className="block text-sm font-medium text-gray-300 mb-1.5">
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={clsx(
+            'w-full bg-gray-900 border rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 transition-colors',
+            error
+              ? 'border-red-500 focus:ring-red-500'
+              : 'border-gray-700 focus:ring-blue-500 focus:border-blue-500',
+            className
+          )}
+          {...props}
+        />
+        {error && (
+          <p className="mt-1 text-sm text-red-400">{error}</p>
+        )}
+        {helperText && !error && (
+          <p className="mt-1 text-sm text-gray-500">{helperText}</p>
+        )}
+      </div>
+    )
+  }
+)
+
+Input.displayName = 'Input'