import React from "react";
interface LoadingProps {
fullScreen?: boolean;
size?: 'sm' | 'md' | 'lg';
text?: string;
}
const Loading: React.FC<LoadingProps> = ({
fullScreen = true,
size = 'md',
text
}) => {
const sizeClasses = {
sm: 'w-6 h-6',
md: 'w-9 h-9',
lg: 'w-12 h-12'
};
const spinner = (
<div className="flex flex-col items-center">
<div className={`${sizeClasses[size]} border-2 border-foreground/20 border-t-foreground rounded-full animate-spin`}></div>
{text && (
<p className="mt-2 text-sm text-muted-foreground">{text}</p>
)}
</div>
);
if (fullScreen) {
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
{spinner}
</div>
);
}
return spinner;
};
export default Loading; pnpm dlx codebase add loading
import Loading from "@/components/atom/loading"<Loading />