| 3719 |
stevensc |
1 |
import React, { useState } from 'react';
|
|
|
2 |
import { Avatar, AvatarGroup, Button } from '@mui/material';
|
|
|
3 |
import East from '@mui/icons-material/East';
|
|
|
4 |
|
|
|
5 |
import { useFetch } from '@hooks';
|
|
|
6 |
|
|
|
7 |
import Widget from '@components/UI/Widget';
|
|
|
8 |
import MembersModal from '@components/modals/MembersModal';
|
|
|
9 |
|
|
|
10 |
const CompanyFollowers = ({ companyId }) => {
|
|
|
11 |
const { data: followers } = useFetch(`/helpers/company-follower/${companyId}`, []);
|
|
|
12 |
const [showMembersModal, setShowMembersModal] = useState(false);
|
|
|
13 |
|
|
|
14 |
const toggleModal = () => setShowMembersModal(!showMembersModal);
|
|
|
15 |
|
|
|
16 |
return (
|
|
|
17 |
<>
|
|
|
18 |
<Widget>
|
|
|
19 |
<Widget.Header title={`${followers.length} Seguidores`} />
|
|
|
20 |
|
|
|
21 |
<Widget.Body>
|
|
|
22 |
<AvatarGroup max={5}>
|
|
|
23 |
{followers.map(({ name, image }) => (
|
|
|
24 |
<Avatar key={name} src={image} alt={name} />
|
|
|
25 |
))}
|
|
|
26 |
</AvatarGroup>
|
|
|
27 |
</Widget.Body>
|
|
|
28 |
|
|
|
29 |
<Widget.Actions styles={{ padding: '0' }}>
|
|
|
30 |
<Button onClick={toggleModal} fullWidth sx={{ borderRadius: 0 }}>
|
|
|
31 |
Ver más
|
|
|
32 |
<East />
|
|
|
33 |
</Button>
|
|
|
34 |
</Widget.Actions>
|
|
|
35 |
</Widget>
|
|
|
36 |
|
|
|
37 |
<MembersModal
|
|
|
38 |
isShow={showMembersModal}
|
|
|
39 |
handleClose={toggleModal}
|
|
|
40 |
members={followers}
|
|
|
41 |
handleAction={() => null}
|
|
|
42 |
/>
|
|
|
43 |
</>
|
|
|
44 |
);
|
|
|
45 |
};
|
|
|
46 |
|
|
|
47 |
export default CompanyFollowers;
|