60 lines
1.2 KiB
TypeScript
60 lines
1.2 KiB
TypeScript
// config = `{"libraries": ["MaterialUI"]}`
|
|
// @ts-nocheck
|
|
const {
|
|
Box,
|
|
Button,
|
|
colors,
|
|
CssBaseline,
|
|
ThemeProvider,
|
|
Typography,
|
|
createTheme,
|
|
} = MaterialUI;
|
|
const {
|
|
useState,
|
|
useEffect
|
|
} = React;
|
|
|
|
const theme = createTheme({
|
|
palette: {
|
|
primary: {
|
|
main: "#ec4899"
|
|
},
|
|
secondary: {
|
|
main: "#19857b"
|
|
},
|
|
error: {
|
|
main: colors.red.A400
|
|
}
|
|
}
|
|
});
|
|
|
|
function App() {
|
|
const [count, setCount] = useState(0);
|
|
useEffect(() => {
|
|
const timer = () => setCount(prev => prev + 1);
|
|
const token = setInterval(timer, 1000);
|
|
return () => clearInterval(token)
|
|
})
|
|
|
|
return (
|
|
<Box sx={{p: 2}}>
|
|
<Typography>Timer: {count}</Typography>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={() => setCount(0)}>
|
|
Click Me
|
|
</Button>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const root = ReactDOM.createRoot(
|
|
document.getElementById("root")
|
|
);
|
|
root.render(
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
<App/>
|
|
</ThemeProvider>
|
|
); |