FedMCP - Federal Parliamentary Information

/** * AuthInput Component * * Reusable input component for authentication forms * Includes label, error message, and proper styling */ import React from 'react'; export interface AuthInputProps extends React.InputHTMLAttributes<HTMLInputElement> { label: string; error?: string; helperText?: string; } export function AuthInput({ label, error, helperText, id, className = '', ...props }: AuthInputProps) { const inputId = id || label.toLowerCase().replace(/\s+/g, '-'); return ( <div className="w-full" suppressHydrationWarning> <label htmlFor={inputId} className="block text-sm font-medium text-gray-700 mb-1" > {label} </label> <input id={inputId} className={` w-full px-3 py-2 border rounded-md shadow-sm text-gray-900 placeholder-gray-400 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed ${error ? 'border-red-500' : 'border-gray-300'} ${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> ); }