61 lines
1.7 KiB
TypeScript
61 lines
1.7 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';
|
|
import AdminPage from './pages/AdminPage';
|
|
import NotificationProvider from './components/NotificationProvider';
|
|
|
|
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">
|
|
<AppLoader />
|
|
<p className="text-zinc-500 text-sm">Загрузка...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Simple routing for admin
|
|
if (window.location.pathname.startsWith('/admin')) {
|
|
return <AdminPage />;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<AnimatePresence mode="wait">
|
|
{token && user ? (
|
|
<ChatPage key="chat" />
|
|
) : (
|
|
<AuthPage key="auth" />
|
|
)}
|
|
</AnimatePresence>
|
|
<NotificationProvider />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function AppLoader() {
|
|
return (
|
|
<div className="relative w-12 h-12">
|
|
<div className="absolute inset-0 rounded-full border-2 border-transparent border-t-accent animate-spin" />
|
|
<div
|
|
className="absolute inset-1 rounded-full border-2 border-transparent border-t-accent/70 animate-spin"
|
|
style={{ animationDuration: '0.8s', animationDirection: 'reverse' }}
|
|
/>
|
|
<div
|
|
className="absolute inset-2 rounded-full border-2 border-transparent border-t-accent/40 animate-spin"
|
|
style={{ animationDuration: '0.6s' }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|