3714cb7367
Apply the new primary red color #da234d across various UI components, including buttons, loaders, logos, and progress bars, to refresh the platform's visual identity. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/C6hzfGb
30 lines
881 B
TypeScript
30 lines
881 B
TypeScript
interface LoadingSpinnerProps {
|
|
size?: 'sm' | 'md' | 'lg';
|
|
text?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function LoadingSpinner({ size = 'md', text = 'Amazing Content', className = '' }: LoadingSpinnerProps) {
|
|
const sizeClasses = {
|
|
sm: 'w-6 h-6',
|
|
md: 'w-10 h-10',
|
|
lg: 'w-16 h-16'
|
|
};
|
|
|
|
const textSizeClasses = {
|
|
sm: 'text-sm',
|
|
md: 'text-base',
|
|
lg: 'text-lg'
|
|
};
|
|
|
|
return (
|
|
<div className={`flex flex-col items-center justify-center ${className}`}>
|
|
<div className={`${sizeClasses[size]} bg-[#da234d] rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-3`}>
|
|
<div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1"></div>
|
|
</div>
|
|
<div className={`text-white ${textSizeClasses[size]} font-medium`}>{text}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LoadingSpinner; |