Counter Example - Material-ui Typing CST Test

Counter Example — Material-ui Code

Demonstrates a simple counter layout using Material-UI components and React for interactivity.

import React, { useState } from 'react';
import { Button, Typography, Box, ThemeProvider, createTheme } from '@mui/material';

const Counter = () => {
	const [count, setCount] = useState(0);
	const [isDark, setIsDark] = useState(false);
	const toggleTheme = () => setIsDark(!isDark);

	return (
		<ThemeProvider theme={createTheme({ palette: { mode: isDark ? 'dark' : 'light' } })}>
		<Box sx={{ textAlign: 'center', mt: 5 }}>
		<Typography variant='h4'>Counter: {count}</Typography>
		<Box sx={{ mt: 2 }}>
		<Button variant='contained' color='primary' onClick={() => setCount(count + 1)}>+</Button>
		<Button variant='contained' color='error' onClick={() => setCount(count - 1)}>-</Button>
		<Button variant='contained' color='secondary' onClick={() => setCount(0)}>Reset</Button>
		</Box>
		<Button sx={{ mt: 2 }} variant='contained' color='warning' onClick={toggleTheme}>Switch Theme</Button>
		</Box>
		</ThemeProvider>
	);
};

export default Counter;

Material-ui Language Guide

Material-UI (MUI) is a React-based front-end framework that implements Google's Material Design system with prebuilt, customizable components and styling solutions.

More Material-ui Typing Exercises

Practice Other Languages