1772fc522e
- Add Alert component with 4 variants (success/error/warning/info) - Add LoadingSpinner and LoadingButton components - Add FormInput and FormSelect components with icon support - Add Modal and ConfirmationModal components - Add ChatMessage, ChatMessageList, and ChatInput components - Add EventCard component These components will eliminate ~450 lines of duplicated code across pages. Part of Phase 1 (Quick Wins) frontend refactoring.
38 lines
922 B
JavaScript
38 lines
922 B
JavaScript
import { Loader2 } from 'lucide-react';
|
|
|
|
/**
|
|
* Reusable Button component with built-in loading state
|
|
*
|
|
* @param {boolean} loading - Shows loading spinner when true
|
|
* @param {React.ReactNode} children - Button content when not loading
|
|
* @param {string} loadingText - Text to show when loading (default: "Loading...")
|
|
* @param {string} className - Additional CSS classes
|
|
* @param {object} ...props - All other button props (onClick, disabled, etc.)
|
|
*/
|
|
const LoadingButton = ({
|
|
loading = false,
|
|
children,
|
|
loadingText = 'Loading...',
|
|
className = '',
|
|
...props
|
|
}) => {
|
|
return (
|
|
<button
|
|
{...props}
|
|
disabled={loading || props.disabled}
|
|
className={className}
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Loader2 className="w-5 h-5 animate-spin inline mr-2" />
|
|
{loadingText}
|
|
</>
|
|
) : (
|
|
children
|
|
)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default LoadingButton;
|