ItemFound.jsx 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. import {useState} from "react";
  2. import {Button} from "@mui/material";
  3. import Box from "@mui/material/Box";
  4. import {backURL} from "../../../actions/PathDB";
  5. import imgNotFound from "../../../img/catalog/imgNotFound.png";
  6. import Typography from "@mui/material/Typography";
  7. import {CGoodEdit} from "./GoodEdit";
  8. export const ItemFound = ({item:{_id, name, price, images, description, categories}}) => {
  9. let [state, setState] = useState(false)
  10. return (
  11. !state ?
  12. <Button
  13. fullWidth
  14. sx={{
  15. display: 'flex',
  16. justifyContent:'flex-start'
  17. }}
  18. onClick={() => setState(true)}
  19. >
  20. <Box
  21. style={{
  22. display: 'flex',
  23. alignItems: 'center',
  24. marginBottom: '30px'
  25. }}
  26. >
  27. <Box
  28. width='60px'
  29. height='60px'
  30. borderRadius='10px'
  31. overflow='hidden'
  32. marginRight='60px'
  33. position='relative'
  34. >
  35. <img
  36. style={{
  37. position: 'absolute',
  38. top: '0',
  39. left: '0',
  40. width: '100%',
  41. height: '100%',
  42. objectFit: 'cover'
  43. }}
  44. src={images && Array.isArray(images) && images[0]?.url ?
  45. backURL + '/' + images[0].url : imgNotFound
  46. }
  47. alt={name}
  48. />
  49. </Box>
  50. <Box sx={{
  51. display: 'flex',
  52. flexDirection: 'column',
  53. justifyContent: 'space-between',
  54. alignItems: 'flex-start'
  55. }}>
  56. <Typography
  57. color='#000'
  58. letterSpacing='1px'
  59. fontFamily='sarif'
  60. fontWeight='600'
  61. variant='h6'
  62. >
  63. {name || 'no name'}
  64. </Typography>
  65. <Typography
  66. letterSpacing='1px'
  67. variant='body1'
  68. fontWeight='300'
  69. color='#616161'
  70. margin='10px 0'
  71. sx={{textTransform: 'capitalize'}}
  72. >
  73. {description?.length > 60 ?
  74. 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
  75. :
  76. description
  77. }
  78. </Typography>
  79. <Typography
  80. color='#000'
  81. letterSpacing='1px'
  82. variant='body1'
  83. fontWeight='600'
  84. >
  85. ${parseFloat(price).toFixed(2)}
  86. </Typography>
  87. </Box>
  88. </Box>
  89. </Button>
  90. :
  91. <Box
  92. sx={{
  93. marginBottom: '30px',
  94. border: '1px solid #616161',
  95. borderRadius: '10px',
  96. padding: '30px 20px'
  97. }}
  98. >
  99. <CGoodEdit
  100. entity={{_id, name, price, images, description, categories}}
  101. />
  102. <Button
  103. variant='outlined'
  104. sx={{marginTop: '30px'}}
  105. fullWidth
  106. onClick={() => setState(false)}
  107. >
  108. Cansel
  109. </Button>
  110. </Box>
  111. )
  112. }