initial

frontend/src/components/ui/Input.tsx

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