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:
42
src/App.jsx
42
src/App.jsx
@@ -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;
|
@@ -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;
|
15
src/main.jsx
15
src/main.jsx
@@ -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>,
|
||||
)
|
||||
);
|
||||
|
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<h1>This is the Dashboard Page</h1>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
const EditorPage = () => {
|
||||
return (
|
||||
<h1>This is the Editor Page</h1>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditorPage;
|
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
const NotFound = () => {
|
||||
return (
|
||||
<h1>404: Page Not Found</h1>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFound;
|
@@ -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;
|
||||
|
||||
|
Reference in New Issue
Block a user