-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathProjectDialog.jsx
More file actions
123 lines (119 loc) · 3.28 KB
/
Copy pathProjectDialog.jsx
File metadata and controls
123 lines (119 loc) · 3.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import data from '../locales/es/translation.json'
import { Box } from '@mui/material'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogTitle from '@mui/material/DialogContent'
import Link from '@mui/material/Link'
import Typography from '@mui/material/Typography'
import Image from 'mui-image'
import React from 'react'
import { useTranslation } from 'react-i18next'
function ProjectDialog({ onClose, projectId, open }) {
const handleClose = () => {
onClose(projectId)
}
const { t } = useTranslation()
if (open) {
const {
'code-url': codeUrl,
'project-url': projectUrl,
image,
} = data.projects[projectId]
return (
<Dialog onClose={handleClose} open={open} maxWidth='sm'>
<DialogTitle
sx={{
display: 'flex',
justifyContent: 'center',
fontSize: '30px',
paddingBottom: '0',
textDecoration: 'underline',
overflowY: 'hidden',
}}
>
{t(`projects.${Number(projectId)}.title`)}
</DialogTitle>
<DialogContent
sx={{
paddingBottom: '0',
overflowY: 'hidden',
}}
>
<Image
src={image}
height='100%'
width='100%'
fit='cover'
duration={900}
easing='cubic-bezier(0.7, 0, 0.6, 1)'
showLoading={false}
errorIcon={true}
shift={null}
distance='100px'
shiftDuration={900}
bgColor='inherit'
/>
<Box paddingY={1}>
<Typography variant='body1'>
{t(`projects.${Number(projectId)}.description`)}
</Typography>
<Typography variant='body2' color='#ff7878' paddingTop={1}>
{data.projects[projectId].description2
? t(`projects.${Number(projectId)}.description2`)
: undefined}
</Typography>
</Box>
</DialogContent>
<DialogActions
sx={{
display: 'flex',
justifyContent: 'space-around',
paddingY: '20px',
}}
>
<Link
href={projectUrl}
target='_blank'
rel='noopener'
sx={{
textDecoration: 'none',
}}
>
<Button
variant='contained'
sx={{
':hover': {
backgroundColor: 'lightskyblue',
},
}}
>
{t('dialogButtons.item1')}
</Button>
</Link>
<Link
href={codeUrl}
target='_blank'
rel='noopener'
sx={{
textDecoration: 'none',
}}
>
<Button
variant='contained'
sx={{
':hover': {
backgroundColor: 'lightskyblue',
},
}}
>
{t('dialogButtons.item2')}
</Button>
</Link>
</DialogActions>
</Dialog>
)
}
}
export default ProjectDialog