coffee/components/cards/order-card/OrderCard.jsx

import { Divider, Paper, Typography } from '@mui/material';
import PropType from 'prop-types';

const OrderCard = ({ data }) => {
  return (
    <Paper
      sx={{
        p: 3,
        width: '100%',
        mb: 2,
        backgroundColor: '#f2f2f2',
        textAlign: { xs: 'center', md: 'left' },
        ml: { sm: '10%' },
      }}
      elevation={3}
    >
      <Typography sx={{ fontWeight: 600 }}>
        Order placed on: {data.date}
      </Typography>
      <Divider />
      <Typography sx={{ mt: 1 }}>By: {data.name}</Typography>
      <Typography>Total: ${data.totalPrice.toFixed(2)}</Typography>
    </Paper>
  );
};

OrderCard.propTypes = {
  data: PropType.shape({
    date: PropType.string,
    name: PropType.string,
    totalPrice: PropType.number,
  }),
};

export default OrderCard;