38 lines
953 B
TypeScript
38 lines
953 B
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/ui-styles'
|
|
|
|
interface LoadingStateProps {
|
|
message?: string
|
|
className?: string
|
|
size?: 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
export default function LoadingState({ message = '加载中...', className, size = 'md' }: LoadingStateProps) {
|
|
const sizeClasses = {
|
|
sm: 'h-8 w-8 border-b-2',
|
|
md: 'h-12 w-12 border-b-2',
|
|
lg: 'h-16 w-16 border-b-2',
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center justify-center rounded-lg border border-slate-200 bg-white py-12 transition-colors dark:border-slate-700 dark:bg-slate-800',
|
|
className,
|
|
)}
|
|
>
|
|
<div className="text-center">
|
|
<div
|
|
className={cn(
|
|
'animate-spin rounded-full border-slate-400 dark:border-slate-500 mx-auto',
|
|
sizeClasses[size],
|
|
)}
|
|
/>
|
|
{message && <p className="mt-4 text-slate-600 dark:text-slate-400">{message}</p>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|