import { ReloadIcon } from '@radix-ui/react-icons'
import { LoaderCircleIcon } from 'lucide-react'
@layer utilities {
.reload-btn {
animation: slideDown 0.5s ease-out forwards;
}
@keyframes slideDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
}
export const LoadingState = ({ message }: { message: string }) => (
<div className="flex flex-col justify-center items-center h-3/4 gap-2">
<p>{message}</p>
<span className="animate-spin">
<LoaderCircleIcon />
</span>
</div>
)
export const ErrorState = ({ message, onReload }: { message: string; onReload: () => void }) => (
<div className="flex flex-col justify-center items-center h-3/4 gap-2">
<p className="text-center text-red-500">{message}</p>
<button
className="reload-btn flex items-center justify-center rounded-full w-8 h-8 bg-[#17151F]/90 text-white ring-offset-background transition-all duration-500 ease-out opacity-0 translate-y-[-20px]
hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
onClick={onReload}
>
<ReloadIcon />
</button>
</div>
)