Browser Manager MCP Server

/** * Professional Loading Spinner Component with variants and sizes */ import React from 'react'; import { cn } from '../../utils/cn'; export interface LoadingSpinnerProps { size?: 'sm' | 'md' | 'lg' | 'xl'; variant?: 'primary' | 'secondary' | 'white'; className?: string; label?: string; } export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ size = 'md', variant = 'primary', className, label }) => { const sizeClasses = { sm: 'w-4 h-4', md: 'w-6 h-6', lg: 'w-8 h-8', xl: 'w-12 h-12' }; const colorClasses = { primary: 'text-blue-600', secondary: 'text-gray-600', white: 'text-white' }; const classes = cn( 'animate-spin', sizeClasses[size], colorClasses[variant], className ); return ( <div className="flex items-center justify-center"> <svg className={classes} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden={label ? 'false' : 'true'} aria-label={label} > <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /> <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" /> </svg> {label && ( <span className="ml-2 text-sm text-gray-600">{label}</span> )} </div> ); }; export default LoadingSpinner;