Edit and move KatRezo component

2022-05-08 23:46:02 +04:00
parent bf97113eb5
commit f69dfeeff5
1 changed files with 28 additions and 23 deletions
@@ -0,0 +1,65 @@
+import {useState} from 'react'
+import PropTypes from 'prop-types'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardActionArea from '@mui/material/CardActionArea'
+import Divider from '@mui/material/Divider'
+import Grid from '@mui/material/Grid'
+
+import Typography from '@mui/material/Typography'
+import {CardMedia} from '@mui/material'
+
+import RezoImaj from '../rezo-imaj'
+
+export default function KatRezoNou({tit, img, soutit, ko, lyen}) {
+  const [open, setOpen] = useState(false)
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  return (
+    <>
+      <Grid item xs={12} md={6} sx={{marginBottom: 2}}>
+        <Card raised>
+          <CardActionArea onClick={handleClickOpen}>
+            <CardMedia
+              component='img'
+              height='140'
+              image={`/captures/${img}.png`}
+              alt={`Aperçu ${tit}`}
+            />
+            <CardContent>
+              <Typography color='primary' variant='h6' component='div'>
+                {tit}
+              </Typography>
+              <Typography variant='h6' component='div'>
+                {soutit}
+              </Typography>
+              <Typography variant='body2'>
+                {ko}
+              </Typography>
+            </CardContent>
+          </CardActionArea>
+          <Divider sx={{borderWidth: 1}} />
+          <CardActionArea onClick={() => window.open(lyen, '_blank')}>
+            <CardContent>
+              <Typography textAlign='center' color='primary' variant='h6' component='div'>
+                Accéder à {tit}
+              </Typography>
+            </CardContent>
+          </CardActionArea>
+        </Card>
+      </Grid>
+      <RezoImaj tit={tit} img={img} open={open} setOpen={setOpen} />
+    </>
+  )
+}
+
+KatRezoNou.propTypes = {
+  tit: PropTypes.string.isRequired,
+  img: PropTypes.string.isRequired,
+  soutit: PropTypes.string.isRequired,
+  ko: PropTypes.string.isRequired,
+  lyen: PropTypes.string.isRequired
+}