CategoryFound.jsx 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import {useState} from "react";
  2. import {Button} from "@mui/material";
  3. import Box from "@mui/material/Box";
  4. import Typography from "@mui/material/Typography";
  5. import {CCategoryEdit} from "./CategoryEdit";
  6. import {timeCalc} from "../../ProductPage/timeCalc";
  7. export const CategoryFound = ({item}) => {
  8. let [state, setState] = useState(false)
  9. let formattedTime = 0;
  10. if (['createdAt'] in item) {
  11. formattedTime = timeCalc(+item.createdAt);
  12. }
  13. return (
  14. !state ?
  15. <Button
  16. fullWidth
  17. sx={{
  18. display: 'flex',
  19. justifyContent:'center',
  20. alignItems: 'center',
  21. marginBottom: '20px',
  22. border: '1px dashed #616161',
  23. borderRadius: '20px',
  24. padding: '20px'
  25. }}
  26. onClick={() => setState(true)}
  27. >
  28. <Box sx={{
  29. display: 'flex',
  30. flexDirection: 'column',
  31. justifyContent: 'space-between',
  32. alignItems: 'flex-start'
  33. }}>
  34. <Typography
  35. color='#000'
  36. letterSpacing='1px'
  37. fontFamily='sarif'
  38. fontWeight='600'
  39. variant='h6'
  40. >
  41. {item?.name || 'no name'}
  42. </Typography>
  43. <Typography
  44. letterSpacing='1px'
  45. variant='body1'
  46. fontWeight='300'
  47. color='#616161'
  48. margin='10px 0'
  49. >
  50. { formattedTime
  51. ? `Time of creation: ${formattedTime}`
  52. : ''
  53. }
  54. </Typography>
  55. <Typography
  56. color='#000'
  57. letterSpacing='1px'
  58. variant='body1'
  59. fontWeight='600'
  60. >
  61. { item?.goods?.length
  62. ? `Count of goods: ${item?.goods?.length}`
  63. : ''
  64. }
  65. </Typography>
  66. <Typography
  67. color='#000'
  68. letterSpacing='1px'
  69. variant='body1'
  70. fontWeight='600'
  71. >
  72. { item?.subCategories?.length
  73. ? `Count of sub categories: ${item?.subCategories?.length}`
  74. : ''
  75. }
  76. </Typography>
  77. </Box>
  78. </Button>
  79. :
  80. <Box
  81. sx={{
  82. marginBottom: '30px',
  83. border: '1px solid #616161',
  84. borderRadius: '10px',
  85. padding: '30px 20px'
  86. }}
  87. >
  88. <CCategoryEdit entity={{...item}}/>
  89. <Button
  90. variant='outlined'
  91. sx={{marginTop: '30px'}}
  92. fullWidth
  93. onClick={() => setState(false)}
  94. >
  95. Cansel
  96. </Button>
  97. </Box>
  98. )
  99. }