DrawerCartItem.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import { Box, width } from '@mui/system';
  2. import { backendURL } from '../../../helpers';
  3. import defaultGoodImage from '../../../images/default-good-image.png';
  4. import { IoCloseOutline } from 'react-icons/io5';
  5. import { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai';
  6. import { actionCartChange } from '../../../reducers';
  7. import { useEffect, useState } from 'react';
  8. import { useDispatch } from 'react-redux';
  9. import {
  10. ListItem,
  11. Grid,
  12. Typography,
  13. Stack,
  14. Container,
  15. IconButton,
  16. TextField,
  17. ButtonGroup,
  18. Button,
  19. Input,
  20. TableCell,
  21. TableRow,
  22. Card,
  23. CardMedia,
  24. CardContent,
  25. } from '@mui/material';
  26. const DrawerCartItem = ({ order, onDeleteClick }) => {
  27. const {
  28. good: { _id, images = [], name = '', price = 0 },
  29. } = order || {};
  30. return (
  31. <Card className="DrawerCartItem">
  32. <CardMedia
  33. component="img"
  34. sx={{ width: 90 }}
  35. src={images && images[0]?.url ? `${images ? images[0]?.url : ''}` : defaultGoodImage}
  36. />
  37. <Box sx={{ display: 'flex', width: '100%' }}>
  38. <CardContent className="content">
  39. <Typography component="div" variant="h5">
  40. {name}
  41. </Typography>
  42. <Typography variant="subtitle1" color="text.secondary" component="div">
  43. {price}
  44. </Typography>
  45. </CardContent>
  46. <Box className="buttons">
  47. <IconButton onClick={() => onDeleteClick({ _id, images, name, price })}>
  48. <IoCloseOutline />
  49. </IconButton>
  50. </Box>
  51. </Box>
  52. </Card>
  53. );
  54. };
  55. export { DrawerCartItem };