Skip to content

Commit 1ab1f9e

Browse files
CopilotBoshen
Copilot
and
Boshen
committed
Add React Router for proper page routing
Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com>
1 parent 087f7c4 commit 1ab1f9e

6 files changed

Lines changed: 181 additions & 63 deletions

File tree

‎apps/dashboard/package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,17 @@
1010
"clean": "rm -rf dist"
1111
},
1212
"dependencies": {
13+
"lucide-react": "^0.414.0",
1314
"react": "^19.1.1",
1415
"react-dom": "^19.1.1",
15-
"recharts": "^2.12.6",
16-
"lucide-react": "^0.414.0"
16+
"react-router-dom": "^7.8.2",
17+
"recharts": "^2.12.6"
1718
},
1819
"devDependencies": {
1920
"@types/react": "^19.1.10",
2021
"@types/react-dom": "^19.1.7",
21-
"typescript": "catalog:",
22-
"rolldown-vite": "7.1.4"
22+
"@types/react-router-dom": "^5.3.3",
23+
"rolldown-vite": "7.1.4",
24+
"typescript": "catalog:"
2325
}
2426
}

‎apps/dashboard/src/App.tsx‎

Lines changed: 12 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,19 @@
1-
import { useState } from 'react'
2-
import { BarChart3, Package, Zap } from 'lucide-react'
1+
import { BrowserRouter, Routes, Route } from 'react-router-dom'
32
import './App.css'
4-
import RolldownStats from './RolldownStats'
5-
import MinificationBenchmarks from './MinificationBenchmarks'
3+
import Layout from './components/Layout'
4+
import RolldownStatsPage from './pages/RolldownStatsPage'
5+
import MinificationBenchmarksPage from './pages/MinificationBenchmarksPage'
66

77
function App() {
8-
const [selectedPage, setSelectedPage] = useState('rolldown')
9-
const [selectedMetric, setSelectedMetric] = useState('bundleSize')
10-
118
return (
12-
<div className="dashboard">
13-
<header className="dashboard-header">
14-
<div className="header-content">
15-
<div className="logo">
16-
<BarChart3 size={28} />
17-
<h1>{selectedPage === 'rolldown' ? 'Rolldown-Vite Dashboard' : 'Minification Benchmarks'}</h1>
18-
</div>
19-
<p className="header-subtitle">
20-
{selectedPage === 'rolldown'
21-
? 'Statistics collected from different Rolldown-Vite versions'
22-
: 'Performance comparison of JavaScript minification tools'}
23-
</p>
24-
</div>
25-
</header>
26-
27-
{/* Page Navigation */}
28-
<nav className="page-nav">
29-
<button
30-
className={`page-button ${selectedPage === 'rolldown' ? 'active' : ''}`}
31-
onClick={() => {
32-
setSelectedPage('rolldown')
33-
setSelectedMetric('bundleSize')
34-
}}
35-
>
36-
<Package size={20} />
37-
Rolldown Stats
38-
</button>
39-
<button
40-
className={`page-button ${selectedPage === 'minification' ? 'active' : ''}`}
41-
onClick={() => {
42-
setSelectedPage('minification')
43-
setSelectedMetric('minTime')
44-
}}
45-
>
46-
<Zap size={20} />
47-
Minification Benchmarks
48-
</button>
49-
</nav>
50-
51-
{/* Render the appropriate component based on selected page */}
52-
{selectedPage === 'rolldown' ? (
53-
<RolldownStats
54-
selectedMetric={selectedMetric}
55-
setSelectedMetric={setSelectedMetric}
56-
/>
57-
) : (
58-
<MinificationBenchmarks
59-
selectedMetric={selectedMetric}
60-
setSelectedMetric={setSelectedMetric}
61-
/>
62-
)}
63-
</div>
9+
<BrowserRouter basename="/vibe-dashboard">
10+
<Routes>
11+
<Route path="/" element={<Layout />}>
12+
<Route index element={<RolldownStatsPage />} />
13+
<Route path="minification" element={<MinificationBenchmarksPage />} />
14+
</Route>
15+
</Routes>
16+
</BrowserRouter>
6417
)
6518
}
6619

‎apps/dashboard/src/components/Layout.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Outlet, Link, useLocation } from 'react-router-dom'
2+
import { Package, Zap } from 'lucide-react'
3+
4+
function Layout() {
5+
const location = useLocation()
6+
7+
return (
8+
<>
9+
{/* Page Navigation */}
10+
<nav className="page-nav">
11+
<Link
12+
to="/"
13+
className={`page-button ${location.pathname === '/' ? 'active' : ''}`}
14+
>
15+
<Package size={20} />
16+
Rolldown Stats
17+
</Link>
18+
<Link
19+
to="/minification"
20+
className={`page-button ${location.pathname === '/minification' ? 'active' : ''}`}
21+
>
22+
<Zap size={20} />
23+
Minification Benchmarks
24+
</Link>
25+
</nav>
26+
27+
{/* Render the current route's component */}
28+
<Outlet />
29+
</>
30+
)
31+
}
32+
33+
export default Layout

‎apps/dashboard/src/pages/MinificationBenchmarksPage.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { useState } from 'react'
2+
import { BarChart3 } from 'lucide-react'
3+
import MinificationBenchmarks from '../MinificationBenchmarks'
4+
5+
function MinificationBenchmarksPage() {
6+
const [selectedMetric, setSelectedMetric] = useState('minTime')
7+
8+
return (
9+
<div className="dashboard">
10+
<header className="dashboard-header">
11+
<div className="header-content">
12+
<div className="logo">
13+
<BarChart3 size={28} />
14+
<h1>Minification Benchmarks</h1>
15+
</div>
16+
<p className="header-subtitle">
17+
Performance comparison of JavaScript minification tools
18+
</p>
19+
</div>
20+
</header>
21+
22+
<MinificationBenchmarks
23+
selectedMetric={selectedMetric}
24+
setSelectedMetric={setSelectedMetric}
25+
/>
26+
</div>
27+
)
28+
}
29+
30+
export default MinificationBenchmarksPage

‎apps/dashboard/src/pages/RolldownStatsPage.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { useState } from 'react'
2+
import { BarChart3 } from 'lucide-react'
3+
import RolldownStats from '../RolldownStats'
4+
5+
function RolldownStatsPage() {
6+
const [selectedMetric, setSelectedMetric] = useState('bundleSize')
7+
8+
return (
9+
<div className="dashboard">
10+
<header className="dashboard-header">
11+
<div className="header-content">
12+
<div className="logo">
13+
<BarChart3 size={28} />
14+
<h1>Rolldown-Vite Dashboard</h1>
15+
</div>
16+
<p className="header-subtitle">
17+
Statistics collected from different Rolldown-Vite versions
18+
</p>
19+
</div>
20+
</header>
21+
22+
<RolldownStats
23+
selectedMetric={selectedMetric}
24+
setSelectedMetric={setSelectedMetric}
25+
/>
26+
</div>
27+
)
28+
}
29+
30+
export default RolldownStatsPage

‎pnpm-lock.yaml‎

Lines changed: 70 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)