1import Typography from '@mui/material/Typography';
 2import {useTheme} from '@mui/material/styles';
 3import Box from '@mui/material/Box';
 4import ShareEvent from '../ShareEvent';
 5import SupportCaroster from '../SupportCaroster';
 6
 7interface Props {
 8  eventName: string;
 9  title: string;
10  description: string;
11  showImage?: boolean;
12}
13
14const NoCar = ({eventName, title, description, showImage}: Props) => {
15  const theme = useTheme();
16
17  return (
18    <Box
19      my={4}
20      mx="auto"
21      pb={16}
22      mt={9}
23      maxWidth="100%"
24      width={340}
25    >
26      <Typography variant="h6" align="center" color="textSecondary">
27        {title}
28      </Typography>
29      {showImage && (
30        <Box
31          component="img"
32          sx={{
33            display: 'block',
34            margin: '0 auto',
35            width: '100%',
36            height: 'auto',
37
38            [theme.breakpoints.down('md')]: {
39              width: '50%',
40            },
41          }}
42          src="/assets/car.png"
43        />
44      )}
45      <Typography sx={{whiteSpace: 'pre-line', mt: 4}} color="textSecondary">
46        {description}
47      </Typography>
48      <ShareEvent
49        color="primary"
50        sx={{
51          mt: 4,
52          backgroundColor: '#fff',
53        }}
54        title={`Caroster ${eventName}`}
55      />
56      <Box mt={4} display="flex" justifyContent="center">
57        <SupportCaroster />
58      </Box>
59    </Box>
60  );
61};
62
63export default NoCar;