43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
import React, { useState } from 'react'
|
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
|
|
import Home from './pages/Home'
|
|
import Detail from './pages/Detail'
|
|
|
|
function App() {
|
|
const [theme, setTheme] = useState('dark')
|
|
|
|
React.useEffect(() => {
|
|
if (theme === 'dark') {
|
|
document.documentElement.classList.add('dark')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
}
|
|
}, [theme])
|
|
|
|
return (
|
|
<Router>
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
|
<header className="bg-white dark:bg-gray-800 shadow">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">G3 Console</h1>
|
|
<button
|
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
|
className="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600"
|
|
>
|
|
{theme === 'dark' ? '☀️' : '🌙'}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<Routes>
|
|
<Route path="/" element={<Home />} />
|
|
<Route path="/instance/:id" element={<Detail />} />
|
|
</Routes>
|
|
</main>
|
|
</div>
|
|
</Router>
|
|
)
|
|
}
|
|
|
|
export default App
|