123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- import React from 'react';
- import {useState} from "react";
- import {Button} from "@mui/material";
- import Box from "@mui/material/Box";
- import Typography from "@mui/material/Typography";
- import {CCategoryEdit} from "./CategoryEdit";
- import {timeCalc} from "../../ProductPage/timeCalc";
- export const CategoryFound = ({item}) => {
- let [state, setState] = useState(false)
- let formattedTime = 0;
- if (['createdAt'] in item) {
- formattedTime = timeCalc(+item.createdAt);
- }
- return (
- !state ?
- <Button
- fullWidth
- sx={{
- display: 'flex',
- justifyContent:'center',
- alignItems: 'center',
- marginBottom: '20px',
- border: '1px dashed #616161',
- borderRadius: '20px',
- padding: '20px'
- }}
- onClick={() => setState(true)}
- >
- <Box sx={{
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'space-between',
- alignItems: 'flex-start'
- }}>
- <Typography
- color='#000'
- letterSpacing='1px'
- fontFamily='sarif'
- fontWeight='600'
- variant='h6'
- >
- {item?.name || 'no name'}
- </Typography>
- <Typography
- letterSpacing='1px'
- variant='body1'
- fontWeight='300'
- color='#616161'
- margin='10px 0'
- >
- { formattedTime
- ? `Time of creation: ${formattedTime}`
- : ''
- }
- </Typography>
- <Typography
- color='#000'
- letterSpacing='1px'
- variant='body1'
- fontWeight='600'
- >
- { item?.goods?.length
- ? `Count of goods: ${item?.goods?.length}`
- : ''
- }
- </Typography>
- <Typography
- color='#000'
- letterSpacing='1px'
- variant='body1'
- fontWeight='600'
- >
- { item?.subCategories?.length
- ? `Count of sub categories: ${item?.subCategories?.length}`
- : ''
- }
- </Typography>
- </Box>
- </Button>
- :
- <Box
- sx={{
- marginBottom: '30px',
- border: '1px solid #616161',
- borderRadius: '10px',
- padding: '30px 20px'
- }}
- >
- <CCategoryEdit entity={{...item}}/>
- <Button
- variant='outlined'
- sx={{marginTop: '30px'}}
- fullWidth
- onClick={() => setState(false)}
- >
- Cansel
- </Button>
- </Box>
- )
- }
|