64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import {
|
|
Alert,
|
|
Box,
|
|
CssBaseline,
|
|
TextField,
|
|
Typography,
|
|
useColorScheme,
|
|
} from '@mui/material';
|
|
import './App.css';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { LanguageManager } from './components/LanguageManager';
|
|
|
|
function App() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<CssBaseline />
|
|
<LanguageManager />
|
|
<div style={{ padding: '16px' }}>
|
|
<Typography variant="h3">{t('helloWorld')}</Typography>
|
|
<Box
|
|
sx={{ display: 'flex', flexDirection: 'column', gap: '10px', mt: 5 }}
|
|
>
|
|
<ThemeToggleButton />
|
|
<Button color="secondary" variant="contained">
|
|
secondary button
|
|
</Button>
|
|
<TextField label={t('helloWorld')} />
|
|
<Alert severity="success" variant="filled">
|
|
success
|
|
</Alert>
|
|
<Alert severity="warning" variant="filled">
|
|
warning
|
|
</Alert>
|
|
<Alert severity="info" variant="filled">
|
|
info
|
|
</Alert>
|
|
<Alert severity="error" variant="filled">
|
|
error
|
|
</Alert>
|
|
</Box>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
|
|
import { Button } from '@mui/material';
|
|
|
|
export const ThemeToggleButton = () => {
|
|
const { mode, setMode } = useColorScheme();
|
|
|
|
return (
|
|
<Button
|
|
variant="contained"
|
|
onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
|
|
>
|
|
Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode
|
|
</Button>
|
|
);
|
|
};
|