frontend/containers/CarosterPlusSettings/index.tsx (view raw)
1import Box from '@mui/material/Box';
2import Button from '@mui/material/Button';
3import Card from '@mui/material/Card';
4import Chip from '@mui/material/Chip';
5import Divider from '@mui/material/Divider';
6import List from '@mui/material/List';
7import ListItem from '@mui/material/ListItem';
8import ListItemIcon from '@mui/material//ListItemIcon';
9import ListItemText from '@mui/material/ListItemText';
10import AddIcon from '@mui/icons-material/Add';
11import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
12import Typography from '@mui/material/Typography';
13import {useTranslation} from 'react-i18next';
14import {Event as EventType} from '../../generated/graphql';
15
16interface Props {
17 event: EventType;
18}
19
20const CarosterPlusSettings = ({event}: Props) => {
21 const {t} = useTranslation();
22
23 return (
24 <Card
25 sx={{
26 position: 'relative',
27 maxWidth: '100%',
28 width: '350px',
29 pb: 3,
30 }}
31 >
32 <Box
33 display="flex"
34 justifyContent="space-between"
35 width="100%"
36 p={2}
37 py={1}
38 >
39 <Typography variant="h4" pt={1}>
40 {t('options.plus.title')}
41 </Typography>
42 </Box>
43 <Divider />
44 <Box p={2} display="flex" justifyContent="space-between" width="100%">
45 <Typography pt={1} variant="body2" color="GrayText">
46 {t('options.plus.admins')}
47 </Typography>
48 <Button variant="text" endIcon={<AddIcon />}>
49 {t('generic.add')}
50 </Button>
51 </Box>
52 <List disablePadding>
53 <ListItem
54 secondaryAction={
55 <Chip label={t('options.plus.creator')} size="medium" />
56 }
57 >
58 <ListItemIcon>
59 <AccountCircleOutlinedIcon />
60 </ListItemIcon>
61 <ListItemText primary={event.email} />
62 </ListItem>
63 </List>
64 </Card>
65 );
66};
67
68export default CarosterPlusSettings;