feat: open a modal on thumbnail clic

openfoodfacts · Oct 28, 2024 · 5d14e44 · 5d14e44
1 parent 26e7872
commit 5d14e44
Showing 1 changed file with 49 additions and 9 deletions.
diff --git a/src/components/ImageTicket.tsx b/src/components/ImageTicket.tsx
@@ -1,13 +1,35 @@
+import { useState } from 'react';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import Date from './Date'
 import TicketsButtons from './TicketsButtons'
 import Box from '@mui/material/Box';
 import { useMediaQuery } from '@mui/material';
 import InfoModal from './InfoModal';
+import Modal from '@mui/material/Modal';
+import Button from '@mui/material/Button';
 
 export default function ImageTicket({ticket, setTickets, tickets}: {ticket: any, setTickets: any, tickets: any}) {
 
+    const style = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '80%',
+        bgcolor: 'background.paper',
+        border: '2px solid #000',
+        boxShadow: 24,
+        p: 4,
+    };
+
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
     const isMobile = useMediaQuery('(max-width:700px)');
     // format url to get mini image
     const imageUrl = ticket.url.replace(/\.jpg$/, '.400.jpg');  
@@ -38,15 +60,33 @@ export default function ImageTicket({ticket, setTickets, tickets}: {ticket: any,
                         },
                     }}
                 >
-                    <a href={ticket.url} target='_blank' >
-                        <img 
-                            src={imageUrl} 
-                            alt={ticket.barcode}
-                            width={250}
-                            height={250}
-                            style={{ objectFit: 'contain'}}
-                        />
-                    </a>
+                    <div>
+                        <Button onClick={handleOpen}>
+                            <img 
+                                src={imageUrl} 
+                                alt={ticket.barcode}
+                                width={250}
+                                height={250}
+                                style={{ objectFit: 'contain'}}
+                            />
+                        </Button>
+                        <Modal
+                            open={open}
+                            onClose={handleClose}
+                            aria-labelledby="modal-modal-title"
+                            aria-describedby="modal-modal-description"
+                        >
+                            <Box sx={style}>
+                                <img 
+                                    src={imageUrl} 
+                                    alt={ticket.barcode}
+                                    width={700}
+                                    height={700}
+                                    style={{ objectFit: 'contain'}}
+                                />
+                            </Box>
+                        </Modal>
+                    </div>                    
                 </Box>
             </TableCell>
             <Date created_at={ticket.created_at} />