56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { useState } from 'react'
|
|
import { Loader2 } from 'lucide-react'
|
|
import { AnimatePresence } from 'framer-motion'
|
|
import { AppProvider, useApp } from './lib/AppContext'
|
|
import { PageFade } from './components/motion'
|
|
import Setup from './pages/Setup'
|
|
import Login from './pages/Login'
|
|
import Layout, { Page } from './components/Layout'
|
|
import Dashboard from './pages/Dashboard'
|
|
import Kanban from './pages/Kanban'
|
|
import Milestones from './pages/Milestones'
|
|
import Bugs from './pages/Bugs'
|
|
import Members from './pages/Members'
|
|
|
|
const PAGES: Record<Page, () => JSX.Element> = {
|
|
dashboard: Dashboard,
|
|
kanban: Kanban,
|
|
milestones: Milestones,
|
|
bugs: Bugs,
|
|
members: Members
|
|
}
|
|
|
|
function Shell(): JSX.Element {
|
|
const { stage } = useApp()
|
|
const [page, setPage] = useState<Page>('dashboard')
|
|
|
|
if (stage === 'loading') {
|
|
return (
|
|
<div className="flex h-full items-center justify-center text-gray-400">
|
|
<Loader2 className="animate-spin" size={28} />
|
|
</div>
|
|
)
|
|
}
|
|
if (stage === 'setup') return <Setup />
|
|
if (stage === 'login') return <Login />
|
|
|
|
const ActivePage = PAGES[page]
|
|
return (
|
|
<Layout page={page} setPage={setPage}>
|
|
<AnimatePresence mode="wait">
|
|
<PageFade key={page}>
|
|
<ActivePage />
|
|
</PageFade>
|
|
</AnimatePresence>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export default function App(): JSX.Element {
|
|
return (
|
|
<AppProvider>
|
|
<Shell />
|
|
</AppProvider>
|
|
)
|
|
}
|