Adicionando snackbar e loading

src/App.js

@@ -18,7 +18,7 @@ const App = () => {
         <TemplateDefault>
           <Routes>
             <Route path="/" element={<TemplatePage title="Página Inicial" component={<Home />} />}  />
-            <Route path="/customers/add" element={<TemplatePage title="Adicionar Usuário" component={<CustomersRegister />} />}  />
+            <Route path="/customers/add" element={<TemplatePage title="Adicionar Cliente" component={<CustomersRegister />} />}  />
             <Route path="/customers" element={<TemplatePage title="Clientes" component={<CustomersList />}/>} />
           </Routes>
         </TemplateDefault>

src/components/ButtonLoading.js

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import {
+  Box,
+  CircularProgress,
+  Button,
+} from '@mui/material'
+import {  green } from '@mui/material/colors'
+
+const ButtonLoading = ({text, onClick, loading}) => {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{position: 'relative' }}>
+        <Button
+          variant="contained"
+          disabled={loading}
+          onClick={onClick}
+        >
+          {text}
+        </Button>
+        {loading && (
+          <CircularProgress
+            size={24}
+            sx={{
+              color: green[500],
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              marginTop: '-12px',
+              marginLeft: '-12px',
+            }}
+          />
+        )}
+      </Box>
+    </Box>
+  )
+}
+
+export default ButtonLoading

src/components/CustomersCard.js

@@ -37,7 +37,7 @@ const CustomersCard = ({
 
   return (
     <>
-      <Card sx={{ maxWidth: 345 }}>
+      <Card sx={{ maxWidth: 345, margin:'0 auto'}}>
         <CardHeader
           avatar={
             <Avatar aria-label="recipe" src={avatar} />

src/components/Snackbar.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import {
+  Snackbar,
+  Alert as MuiAlert,
+  Stack,
+} from '@mui/material/'
+
+const CustomizedSnackbar = ({open, text, onClose, severity}) => {
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return
+    }
+    onClose()
+  }
+
+  return (
+    <Stack spacing={2} sx={{ width: '100%' }}>
+      <Snackbar open={open} autoHideDuration={5000} onClose={handleClose}>
+        <MuiAlert elevation={6} variant="filled" onClose={handleClose} severity={severity} sx={{ width: '100%' }}>
+          {text}
+        </MuiAlert>
+      </Snackbar>
+    </Stack>
+  )
+}
+
+export default CustomizedSnackbar

src/pages/customers/List.js

@@ -4,7 +4,6 @@ import Grid from '@mui/material/Grid'
 
 import CustomersCard from '../../components/CustomersCard'
 
-
 const Customers = () => {
   const [customers, setCustomers] = useState([])
 
@@ -26,11 +25,11 @@ const Customers = () => {
   }
 
   return (
-    <Grid container spacing={3}>
+    <Grid container spacing={4}>
       {
         customers.map(item => {
           return (
-            <Grid item xs={12} md={4}>
+            <Grid item sx={{padding: 0}}xs={12} sm={6} md={4}>
               <CustomersCard
                 id={item.id}
                 name={item.first_name} 

src/pages/customers/Register.js

@@ -1,11 +1,13 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import axios from 'axios'
+
 import {
   TextField,
-  Button,
   Stack,
 } from '@mui/material/'
 
+import Snackbar from '../../components/Snackbar'
+import ButtonLoading from '../../components/ButtonLoading'
 
 const Register = () => {
   const [form, setForm] = useState({
@@ -18,6 +20,8 @@ const Register = () => {
       error: false
     },
   })
+  const [loading, setLoading] = React.useState(false)
+  const [openSnackbar, setOpenSnackbar] = useState(false)
 
   const handleInputChange = (e) => {
     const { name, value } = e.target
@@ -53,40 +57,49 @@ const Register = () => {
         helperText: 'Campo obrigatório'
       } 
     }
+
     if(hasError) {
       return setForm(newFormState)
+    }else{
+      setLoading(true)
     }
+
     axios.post('https://reqres.in/api/users', {
       name: form.name.value,
       job: form.job.value
     }).then(response => {
-      console.log(response)
+      setLoading(false)
+      setOpenSnackbar(true)
     })
   }
 
   return (
-    <Stack direction='column' maxWidth='400px' margin='0 auto'
-    spacing={{ xs: 2, sm: 3, md: 4 }}>
-      <TextField
-        name="name"
-        id="outlined-basic"
-        label="Digite o Nome:"
-        value={form.name.value}
-        error={form.name.error}
-        helperText={form.name.error? form.name.helperText : ''}
-        onChange={handleInputChange}
-      />
-      <TextField
-        name="job"
-        id="outlined-basic"
-        label="Digite o Cargo:"
-        value={form.job.value}
-        error={form.job.error}
-        helperText={form.job.error? form.job.helperText : ''}
-        onChange={handleInputChange}
-      />
-      <Button variant="contained" onClick={handleRegisterButton}>Confirmar</Button>
-    </Stack>
+    <>
+      <Stack direction='column' maxWidth='400px' margin='0 auto'
+      spacing={{ xs: 2, sm: 3, md: 4 }}>
+        <TextField
+          name="name"
+          id="outlined-basic"
+          label="Digite o Nome:"
+          value={form.name.value}
+          error={form.name.error}
+          helperText={form.name.error? form.name.helperText : ''}
+          onChange={handleInputChange}
+        />
+        <TextField
+          name="job"
+          id="outlined-basic"
+          label="Digite o Cargo:"
+          value={form.job.value}
+          error={form.job.error}
+          helperText={form.job.error? form.job.helperText : ''}
+          onChange={handleInputChange}
+        />
+        <ButtonLoading text="Confirmar" onClick={handleRegisterButton} loading={loading} />
+      </Stack>
+      <Snackbar open={openSnackbar} severity="success" text="Cliente cadastrado com sucesso!" onClose={() => setOpenSnackbar(false)}/>
+    </>
+
 
   )
 }

src/partials/Header/Header.js

@@ -68,12 +68,12 @@ const Header = () => {
 
           <ListItem button onClick={() => handleMenuClick('/customers')}>
             <ListItemIcon><PersonIcon /></ListItemIcon>
-            <ListItemText>Clientes</ListItemText>
+            <ListItemText>Lista de Clientes</ListItemText>
           </ListItem>
 
           <ListItem button onClick={() => handleMenuClick('/customers/add')}>
             <ListItemIcon><PersonAddIcon /></ListItemIcon>
-            <ListItemText>Cadastro de Clientes</ListItemText>
+            <ListItemText>Cadastrar Cliente</ListItemText>
           </ListItem>
         </List>