Customer

[elicharlese]

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
  Card,
  CardContent,
  Grid,
  Typography,
  Button,
  Divider,
} from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    backgroundColor: theme.palette.background.default,
  },
  card: {
    minWidth: 275,
    backgroundColor: theme.palette.background.paper,
    boxShadow: '0px 3px 3px -2px rgba(0,0,0,0.2)',
    borderRadius: 10,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: theme.palette.text.primary,
    textAlign: 'center',
  },
  divider: {
    margin: theme.spacing(2, 0),
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: theme.spacing(3),
  },
  button: {
    marginTop: theme.spacing(3),
    backgroundColor: theme.palette.secondary.main,
    color: theme.palette.secondary.contrastText,
    '&:hover': {
      backgroundColor: theme.palette.secondary.dark,
    },
  },
}));

const CustomerAccount = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Card className={classes.card}>
        <CardContent className={classes.content}>
          <Typography className={classes.title} gutterBottom>
            My Account
          </Typography>
          <Divider className={classes.divider} />
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <Typography>
                Name: <strong>John Doe</strong>
              </Typography>
            </Grid>
            <Grid item xs={12} sm={6}>
              <Typography>
                Email: <strong>johndoe@example.com</strong>
              </Typography>
            </Grid>
            <Grid item xs={12} sm={6}>
              <Typography>
                Phone: <strong>+1 123 456 7890</strong>
              </Typography>
            </Grid>
            <Grid item xs={12} sm={6}>
              <Typography>
                Address: <strong>123 Main St, Anytown, USA</strong>
              </Typography>
            </Grid>
          </Grid>
          <Button
            className={classes.button}
            variant="contained"
            disableElevation
          >
            Edit Account Information
          </Button>
        </CardContent>
      </Card>
    </div>
  );
};

export default CustomerAccount;

This component displays the customer's account information, including name, email, phone, and address. The customer can also edit their account information by clicking the "Edit Account Information" button. The component uses Material-UI's Card, CardContent, Typography, Grid, Button, and Divider components to create a clean and modern user interface.