website poc

apps/website/components/ui/Input.tsx

@@ -0,0 +1,31 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean;
+  errorMessage?: string;
+}
+
+export default function Input({
+  error = false,
+  errorMessage,
+  className = '',
+  ...props
+}: InputProps) {
+  const baseStyles = 'block w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm sm:leading-6';
+  const errorStyles = error ? 'ring-warning-amber' : 'ring-charcoal-outline';
+
+  return (
+    <div className="w-full">
+      <input
+        className={`${baseStyles} ${errorStyles} ${className}`}
+        aria-invalid={error}
+        {...props}
+      />
+      {error && errorMessage && (
+        <p className="mt-2 text-sm text-warning-amber">
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  );
+}