55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import { Navigate, Route, Routes } from 'react-router'
|
||
import { RequireAuth, RequireGuest } from './auth/guards'
|
||
import AppLayout from './components/layout/AppLayout'
|
||
import Button from './components/ui/Button'
|
||
import DigitalProgressBar from './components/ui/DigitalProgressBar'
|
||
import Panel from './components/ui/Panel'
|
||
|
||
// Placeholder for the authenticated app home. The real scenario UI lands in the
|
||
// frontend feature tickets (#53–#56); for now it shows the primitives + theme.
|
||
function ScenariosPlaceholder() {
|
||
return (
|
||
<AppLayout>
|
||
<Panel className="mx-auto max-w-md space-y-4">
|
||
<h2 className="text-primary font-bold uppercase tracking-wider">
|
||
Emergency Fund
|
||
</h2>
|
||
<DigitalProgressBar current={750} capacity={1000} />
|
||
<p className="font-digital text-primary text-xl">$750 / $1000</p>
|
||
<Button glow>+ Add Bucket</Button>
|
||
</Panel>
|
||
</AppLayout>
|
||
)
|
||
}
|
||
|
||
// Placeholders replaced by the real auth screens in #52 Stories 4 (login) and 5
|
||
// (register).
|
||
function LoginPlaceholder() {
|
||
return <div>LOGIN</div>
|
||
}
|
||
|
||
function RegisterPlaceholder() {
|
||
return <div>REGISTER</div>
|
||
}
|
||
|
||
function App() {
|
||
return (
|
||
<Routes>
|
||
{/* Guest-only routes (redirect to the app if already signed in). */}
|
||
<Route element={<RequireGuest />}>
|
||
<Route path="/login" element={<LoginPlaceholder />} />
|
||
<Route path="/register" element={<RegisterPlaceholder />} />
|
||
</Route>
|
||
|
||
{/* Authenticated-only routes (redirect to /login if signed out). */}
|
||
<Route element={<RequireAuth />}>
|
||
<Route path="/" element={<ScenariosPlaceholder />} />
|
||
</Route>
|
||
|
||
{/* Unknown paths fall back to the app root (which re-guards). */}
|
||
<Route path="*" element={<Navigate to="/" replace />} />
|
||
</Routes>
|
||
)
|
||
}
|
||
|
||
export default App
|