1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- import React from 'react';
- import {Avatar, Card, CardContent, CardHeader, Collapse} from "@mui/material";
- import {backURL} from "../../../actions/PathDB";
- import userDefault from "../../../img/header/userDefault.png";
- import {useState} from "react";
- import Box from "@mui/material/Box";
- import {timeCalc} from "../../ProductPage/timeCalc";
- import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
- import {ItemAvatar} from "./ItemAvatar";
- import {ItemAccordion} from "./ItemAccordion";
- export const ClientsCart = ({_id, login, nick, avatar, createdAt, acl}) => {
- const [expanded, setExpanded] = useState(false);
- const handleExpandClick = () => {
- setExpanded(!expanded);
- };
- return (
- <Card
- sx={{
- boxShadow: 'none',
- border: '1px solid #616161',
- marginBottom: '20px'
- }}
- >
- <Box
- display='flex'
- justifyContent='space-between'
- alignItems='center'
- padding='0 20px 0 10px'
- style={{cursor:'pointer'}}
- onClick={handleExpandClick}
- >
- <CardHeader
- avatar={
- avatar ?
- <Avatar
- alt="User"
- src={avatar?.url && backURL + '/' + avatar.url}
- />
- :
- <Avatar
- alt="User"
- src={userDefault}
- />
- }
- title={`Login: ${login || 'login'} ${nick ? '| Nick: ' + nick : ''}
- ${(acl && Array.isArray(acl) && acl.length > 1) ?
- '| Status: ' + acl.slice(1, acl.length).toString() : ''}`
- }
- subheader={timeCalc(+createdAt || 0)}
- />
- <ExpandMoreIcon />
- </Box>
- <Collapse
- in={expanded}
- timeout="auto"
- unmountOnExit
- >
- <CardContent>
- <ItemAvatar avatar={avatar}/>
- <ItemAccordion
- text={`Login: ${login || 'login'}`}
- />
- <ItemAccordion
- size={'body1'}
- text={`${nick ? 'Nick: ' + nick : ''}`}
- />
- <ItemAccordion
- size={'body1'}
- text={`${(acl && Array.isArray(acl) && acl.length > 1)
- ? 'Status: ' + acl.slice(1, acl.length).toString()
- : ''}`
- }
- />
- <ItemAccordion
- size={'body1'}
- text={'Created at: '+timeCalc(+createdAt || 0)}
- />
- </CardContent>
- </Collapse>
- </Card>
- )
- }
|