dramaling-vocab-learning/frontend/components/flashcards/LoadingState.tsx

20 lines
573 B
TypeScript

import React from 'react'
interface LoadingStateProps {
message?: string
className?: string
}
export const LoadingState: React.FC<LoadingStateProps> = ({
message = '載入中...',
className = ''
}) => {
return (
<div className={`min-h-screen bg-gray-50 flex items-center justify-center ${className}`}>
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
<div className="text-lg text-gray-600">{message}</div>
</div>
</div>
)
}