1import React from 'react';
 2import Dialog from '@material-ui/core/Dialog';
 3import DialogActions from '@material-ui/core/DialogActions';
 4import DialogContent from '@material-ui/core/DialogContent';
 5import DialogContentText from '@material-ui/core/DialogContentText';
 6import DialogTitle from '@material-ui/core/DialogTitle';
 7import Slide from '@material-ui/core/Slide';
 8import Button from '@material-ui/core/Button';
 9import {useTranslation} from 'react-i18next';
10
11const Transition = React.forwardRef(function Transition(props, ref) {
12  return <Slide direction="up" ref={ref} {...props} />;
13});
14
15const AddToMyEventDialog = ({event, open, onClose}) => {
16  const {t} = useTranslation();
17  return (
18    <Dialog open={open} TransitionComponent={Transition} onClose={onClose}>
19      <DialogContent>
20        <DialogTitle>
21          {t('event.add_to_my_events.title', {eventName: event.name})}
22        </DialogTitle>
23        <DialogContentText
24          dangerouslySetInnerHTML={{
25            __html: t('event.add_to_my_events.text_html', {
26              eventName: event.name,
27            }),
28          }}
29        />
30      </DialogContent>
31      <DialogActions>
32        <Button onClick={onClose} id="AddToMyEventCancel">
33          {t('event.add_to_my_events.cancel')}
34        </Button>
35        <Button id="AddToMyEventLogin" href="/login">
36          {t('event.add_to_my_events.login')}
37        </Button>
38        <Button id="AddToMyEventRegister" href="/register" color="primary">
39          {t('event.add_to_my_events.register')}
40        </Button>
41      </DialogActions>
42    </Dialog>
43  );
44};
45
46export default AddToMyEventDialog;