- Add package.json with development and production dependencies - Create postcss.config.js for Tailwind CSS integration - Implement AdminController for handling admin routes - Add admin index template with React root element - Create base template for consistent layout - Configure TypeScript with tsconfig.json - Set up Webpack configuration for asset management
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Routes, Route, Navigate } from 'react-router-dom';
|
|
import { useAuthStore } from './stores/authStore';
|
|
import AdminLayout from './components/layout/AdminLayout';
|
|
import LoginPage from './pages/LoginPage';
|
|
import DashboardPage from './pages/DashboardPage';
|
|
|
|
function PrivateRoute({ children }: { children: React.ReactNode }) {
|
|
const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
|
|
return isAuthenticated ? <>{children}</> : <Navigate to="/admin/login" replace />;
|
|
}
|
|
|
|
function PublicRoute({ children }: { children: React.ReactNode }) {
|
|
const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
|
|
return isAuthenticated ? <Navigate to="/admin/dashboard" replace /> : <>{children}</>;
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<Routes>
|
|
<Route
|
|
path="/admin/login"
|
|
element={
|
|
<PublicRoute>
|
|
<LoginPage />
|
|
</PublicRoute>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/admin/*"
|
|
element={
|
|
<PrivateRoute>
|
|
<AdminLayout />
|
|
</PrivateRoute>
|
|
}
|
|
>
|
|
<Route index element={<Navigate to="/admin/dashboard" replace />} />
|
|
<Route path="dashboard" element={<DashboardPage />} />
|
|
</Route>
|
|
<Route path="*" element={<Navigate to="/admin/dashboard" replace />} />
|
|
</Routes>
|
|
);
|
|
}
|