123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- import React from 'react';
- import {useState} from "react";
- import {Button} from "@mui/material";
- import Box from "@mui/material/Box";
- import {backURL} from "../../../actions/PathDB";
- import imgNotFound from "../../../img/catalog/imgNotFound.png";
- import Typography from "@mui/material/Typography";
- import {CGoodEdit} from "./GoodEdit";
- export const ItemFound = ({item:{_id, name, price, images, description, categories}}) => {
- let [state, setState] = useState(false)
- return (
- !state ?
- <Button
- fullWidth
- sx={{
- display: 'flex',
- justifyContent:'flex-start'
- }}
- onClick={() => setState(true)}
- >
- <Box
- style={{
- display: 'flex',
- alignItems: 'center',
- marginBottom: '30px'
- }}
- >
- <Box
- width='60px'
- height='60px'
- borderRadius='10px'
- overflow='hidden'
- marginRight='60px'
- position='relative'
- >
- <img
- style={{
- position: 'absolute',
- top: '0',
- left: '0',
- width: '100%',
- height: '100%',
- objectFit: 'cover'
- }}
- src={images && Array.isArray(images) && images[0]?.url ?
- backURL + '/' + images[0].url : imgNotFound
- }
- alt={name}
- />
- </Box>
- <Box sx={{
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'space-between',
- alignItems: 'flex-start'
- }}>
- <Typography
- color='#000'
- letterSpacing='1px'
- fontFamily='sarif'
- fontWeight='600'
- variant='h6'
- >
- {name || 'no name'}
- </Typography>
- <Typography
- letterSpacing='1px'
- variant='body1'
- fontWeight='300'
- color='#616161'
- margin='10px 0'
- sx={{textTransform: 'capitalize'}}
- >
- {description?.length > 60 ?
- 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
- :
- description
- }
- </Typography>
- <Typography
- color='#000'
- letterSpacing='1px'
- variant='body1'
- fontWeight='600'
- >
- ${parseFloat(price).toFixed(2)}
- </Typography>
- </Box>
- </Box>
- </Button>
- :
- <Box
- sx={{
- marginBottom: '30px',
- border: '1px solid #616161',
- borderRadius: '10px',
- padding: '30px 20px'
- }}
- >
- <CGoodEdit
- entity={{_id, name, price, images, description, categories}}
- />
- <Button
- variant='outlined'
- sx={{marginTop: '30px'}}
- fullWidth
- onClick={() => setState(false)}
- >
- Cansel
- </Button>
- </Box>
- )
- }
|