|
1
|
import { cn } from "@/lib/utils"; |
|
2
|
|
|
3
|
interface LoadingSpinnerProps { |
|
4
|
className?: string; |
|
5
|
size?: "sm" | "md" | "lg"; |
|
6
|
} |
|
7
|
|
|
8
|
export function LoadingSpinner({ className, size = "md" }: LoadingSpinnerProps) { |
|
9
|
const sizeClasses = { |
|
10
|
sm: "h-4 w-4", |
|
11
|
md: "h-8 w-8", |
|
12
|
lg: "h-12 w-12" |
|
13
|
}; |
|
14
|
|
|
15
|
return ( |
|
16
|
<div |
|
17
|
className={cn( |
|
18
|
"animate-spin rounded-full border-4 border-solid border-primary-600 border-r-transparent", |
|
19
|
sizeClasses[size], |
|
20
|
className |
|
21
|
)} |
|
22
|
/> |
|
23
|
); |
|
24
|
} |
|
25
|
|
|
26
|
export function PageLoadingSpinner() { |
|
27
|
return ( |
|
28
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 amoled:bg-black flex items-center justify-center"> |
|
29
|
<div className="text-center"> |
|
30
|
<LoadingSpinner size="lg" className="mx-auto mb-4" /> |
|
31
|
<p className="text-gray-600 dark:text-gray-300 amoled:text-gray-300">Loading...</p> |
|
32
|
</div> |
|
33
|
</div> |
|
34
|
); |
|
35
|
} |