Material UI Base Fiddle

by Paweł Niemczyk

HTML

<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

React

import { RaisedButton, TextField,MuiThemeProvider, Box, Button, getMuiTheme, Slider, DatePicker }  from '@mui/material';
import React, { useState } from "react";

function ToDoForm() {
  const [note, setNote] = useState('');

  const handleSave = () => {
    // Handle save action, like saving to state or making API call
    console.log('Note:', note);
    setNote(''); // Clearing the input field after saving
  };

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 2,
      }}
    >
      <TextField
        variant="outlined"
        placeholder="New To-Do"
        value={note}
        onChange={(e) => setNote(e.target.value)}
        fullWidth
      />
      <TextField
        variant="outlined"
        placeholder="Notes"
        value={note}
        onChange={(e) => setNote(e.target.value)}
        fullWidth
        multiline
        rows={4}
      />
      <Box
        sx={{
          display: 'flex',
          gap: 2,
          mt: 2,
          width: '100%',
          justifyContent: 'space-between',
        }}
      >
        <Button variant="contained" onClick={() => setNote('')}>
          Cancel
        </Button>
        <Button variant="contained" color="primary" onClick={handleSave}>
          Save
        </Button>
      </Box>
    </Box>
  );
}


const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <ToDoForm />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);