51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { useEffect } from 'react';
|
||
import { AnimatePresence } from 'framer-motion';
|
||
import { useAuthStore } from './stores/authStore';
|
||
import AuthPage from './pages/AuthPage';
|
||
import ChatPage from './pages/ChatPage';
|
||
|
||
export default function App() {
|
||
const { token, user, checkAuth, isLoading } = useAuthStore();
|
||
|
||
useEffect(() => {
|
||
checkAuth();
|
||
}, [checkAuth]);
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="h-full flex items-center justify-center bg-surface">
|
||
<div className="flex flex-col items-center gap-4">
|
||
<VortexLoader />
|
||
<p className="text-zinc-500 text-sm">Загрузка...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<AnimatePresence mode="wait">
|
||
{token && user ? (
|
||
<ChatPage key="chat" />
|
||
) : (
|
||
<AuthPage key="auth" />
|
||
)}
|
||
</AnimatePresence>
|
||
);
|
||
}
|
||
|
||
function VortexLoader() {
|
||
return (
|
||
<div className="relative w-12 h-12">
|
||
<div className="absolute inset-0 rounded-full border-2 border-transparent border-t-vortex-500 animate-spin" />
|
||
<div
|
||
className="absolute inset-1 rounded-full border-2 border-transparent border-t-vortex-400 animate-spin"
|
||
style={{ animationDuration: '0.8s', animationDirection: 'reverse' }}
|
||
/>
|
||
<div
|
||
className="absolute inset-2 rounded-full border-2 border-transparent border-t-vortex-300 animate-spin"
|
||
style={{ animationDuration: '0.6s' }}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|