feat: add tab switching to App component

- Add PageType type definition
- Add currentPage state
- Add tab switching buttons
- Add conditional rendering of pages

Co-Authored-By: Claude Op. 4.6 <noreply@anthropic.com>
This commit is contained in:
雨霖铃
2026-03-20 01:16:57 +08:00
parent 63c8fe805e
commit a0854da80c
+24 -1
View File
@@ -1,10 +1,33 @@
import { useState } from 'react';
import { Box, Button } from '@mui/material';
import TimestampPage from './pages/TimestampPage'; import TimestampPage from './pages/TimestampPage';
import StorageCleanerPage from './pages/StorageCleanerPage';
import './App.css'; import './App.css';
type PageType = 'timestamp' | 'storageCleaner';
function App() { function App() {
const [currentPage, setCurrentPage] = useState<PageType>('timestamp');
return ( return (
<div className="app"> <div className="app">
<TimestampPage /> <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
<Button
variant={currentPage === 'timestamp' ? 'contained' : 'outlined'}
onClick={() => setCurrentPage('timestamp')}
>
</Button>
<Button
variant={currentPage === 'storageCleaner' ? 'contained' : 'outlined'}
onClick={() => setCurrentPage('storageCleaner')}
sx={{ ml: 1 }}
>
</Button>
</Box>
{currentPage === 'timestamp' && <TimestampPage />}
{currentPage === 'storageCleaner' && <StorageCleanerPage />}
</div> </div>
); );
} }