feat: Initialize dashboard app with core structure and routing

This commit sets up the foundation for the new dashboard application by
implementing the main component structure, routing, and a basic UI shell with
KendoReact components.

- Set up the main application shell
- Implement a routing system with React Router
- Build a new App Bar component
- Create page placeholders for all routes
- Corrected various import and export errors
This commit is contained in:
2025-09-14 22:38:07 -05:00
parent ebb211abdb
commit 0ce04fb7ac
9 changed files with 151 additions and 39 deletions

View File

@@ -1,35 +1,15 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import React from 'react';
import AppRoutes from './routes/AppRoutes';
import CampfireAppBar from './components/AppBar';
function App() {
const [count, setCount] = useState(0)
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
<div>
<CampfireAppBar />
<AppRoutes />
</div>
);
export default App
};
export default App;

View File

@@ -0,0 +1,27 @@
import React from 'react';
import { AppBar, AppBarSection, AppBarSpacer } from '@progress/kendo-react-layout';
import { Button } from '@progress/kendo-react-buttons';
import { Link } from 'react-router-dom';
const CampfireAppBar = () => {
return (
<AppBar position="sticky">
<AppBarSection>
<Link to="/dashboard">
<Button look="flat">Dashboard</Button>
</Link>
<Link to="/editor">
<Button look="flat">New Post</Button>
</Link>
</AppBarSection>
<AppBarSpacer style={{width: 32 }} />
<AppBarSection>
<Button look="flat">Logout</Button>
</AppBarSection>
</AppBar>
);
};
export default CampfireAppBar;

View File

@@ -1,11 +1,14 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import 'campfire-logs-dashboard/dist/css/campfire-logs-dashboard.css';
import './index.css'
import App from './App.jsx'
import './index.css';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
)
);

View File

@@ -0,0 +1,9 @@
import React from 'react';
const Dashboard = () => {
return (
<h1>This is the Dashboard Page</h1>
);
};
export default Dashboard;

View File

@@ -0,0 +1,9 @@
import React from 'react';
const EditorPage = () => {
return (
<h1>This is the Editor Page</h1>
);
};
export default EditorPage;

View File

@@ -0,0 +1,9 @@
import React from 'react';
const NotFound = () => {
return (
<h1>404: Page Not Found</h1>
);
};
export default NotFound;

View File

@@ -0,0 +1,20 @@
import React from 'react'
import { Routes, Route } from 'react-router-dom';
import Dashboard from '../pages/Dashboard';
import EditorPage from '../pages/EditorPage';
import NotFound from '../pages/NotFound';
const AppRoutes = () => {
return (
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/editor" element={<EditorPage />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
};
export default AppRoutes;