]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/episodes/Crew.js
0a037ee8ec7bb340700e7df33096244beea2f806
[alttp.git] / resources / js / components / episodes / Crew.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Col, Row } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
5
6 import CrewMember from './CrewMember';
7 import Icon from '../common/Icon';
8 import { compareCrew } from '../../helpers/Crew';
9
10 const Crew = ({ crew }) => {
11         const { t } = useTranslation();
12
13         const commentators = React.useMemo(() =>
14                 crew.filter(c => c.role === 'commentary').sort(compareCrew)
15         , [crew]);
16         const trackers = React.useMemo(() =>
17                 crew.filter(c => c.role === 'tracking').sort(compareCrew)
18         , [crew]);
19         const techies = React.useMemo(() =>
20                 crew.filter(c => c.role === 'setup').sort(compareCrew)
21         , [crew]);
22
23         return <Row className="episode-crew">
24                 {commentators.length ?
25                         <Col md>
26                                 <div className="fs-5">
27                                         <Icon.MICROPHONE className="ms-3 me-2" title="" />
28                                         {t('episodes.commentary')}
29                                 </div>
30                                 {commentators.map(c =>
31                                         <CrewMember crew={c} key={c.id} />
32                                 )}
33                         </Col>
34                 : null}
35                 {trackers.length ?
36                         <Col md>
37                                 <div className="fs-5">
38                                         <Icon.MOUSE className="ms-3 me-2" title="" />
39                                         {t('episodes.tracking')}
40                                 </div>
41                                 {trackers.map(c =>
42                                         <CrewMember crew={c} key={c.id} />
43                                 )}
44                         </Col>
45                 : null}
46                 {techies.length ?
47                         <Col md>
48                                 <div className="fs-5">
49                                         <Icon.MONITOR className="ms-3 me-2" title="" />
50                                         {t('episodes.setup')}
51                                 </div>
52                                 {techies.map(c =>
53                                         <CrewMember crew={c} key={c.id} />
54                                 )}
55                         </Col>
56                 : null}
57         </Row>;
58 };
59
60 Crew.propTypes = {
61         crew: PropTypes.arrayOf(PropTypes.shape({
62         })),
63 };
64
65 export default Crew;