feat: preview carousel

frontend/src/components/gallery.tsx

@@ -1,4 +1,8 @@
-import { Box, Image, SimpleGrid, Skeleton } from '@mantine/core'
+import { Box, Image, Portal, SimpleGrid, Skeleton } from '@mantine/core'
+import { useState } from 'react'
+
+import OverlayPreview from './overlayPreview'
+
 import { GeneratedImage } from '~/types/generatedImage'
 
 interface Props {
@@ -7,37 +11,64 @@ interface Props {
 }
 
 const Gallery = ({ images, isLoading }: Props) => {
+  const [showOverlay, setShowOverlay] = useState(false)
+  const [initialIndex, setInitialIndex] = useState(0)
+
   return (
-    <Box>
-      {isLoading && (
-        <Skeleton
-          h={{
-            xs: 300,
-            sm: 400,
-            md: 300,
-          }}
-          my={'sm'}
-        />
+    <>
+      <Box>
+        {isLoading && (
+          <Skeleton
+            h={{
+              xs: 300,
+              sm: 400,
+              md: 300,
+            }}
+            my={'sm'}
+          />
+        )}
+        <SimpleGrid
+          breakpoints={[
+            { maxWidth: 'xs', cols: 1 },
+            { maxWidth: 'sm', cols: 2 },
+            { minWidth: 'sm', cols: 2 },
+            { minWidth: 'md', cols: 2 },
+            { minWidth: 'lg', cols: 3 },
+            { minWidth: 'xl', cols: 4 },
+          ]}
+        >
+          {images.map((image, i) => {
+            return (
+              <Box key={image.url}>
+                <Image
+                  src={image.url}
+                  alt={image.info.prompt}
+                  sx={{
+                    cursor: 'pointer',
+                  }}
+                  onClick={() => {
+                    setInitialIndex(i)
+                    setShowOverlay(true)
+                  }}
+                />
+              </Box>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+
+      {showOverlay && (
+        <Portal>
+          <OverlayPreview
+            images={images}
+            initialIndex={initialIndex}
+            onClose={() => {
+              setShowOverlay(false)
+            }}
+          />
+        </Portal>
       )}
-      <SimpleGrid
-        breakpoints={[
-          { maxWidth: 'xs', cols: 1 },
-          { maxWidth: 'sm', cols: 2 },
-          { minWidth: 'sm', cols: 2 },
-          { minWidth: 'md', cols: 2 },
-          { minWidth: 'lg', cols: 3 },
-          { minWidth: 'xl', cols: 4 },
-        ]}
-      >
-        {images.map((image) => {
-          return (
-            <Box key={image.url}>
-              <Image src={image.url} />
-            </Box>
-          )
-        })}
-      </SimpleGrid>
-    </Box>
+    </>
   )
 }
 

frontend/src/components/overlayPreview.tsx

@@ -0,0 +1,83 @@
+import { Carousel } from '@mantine/carousel'
+import { Box, Center, CloseButton, Flex } from '@mantine/core'
+
+import { GeneratedImage } from '~/types/generatedImage'
+
+interface Props {
+  images: GeneratedImage[]
+  initialIndex: number
+  onClose: () => void
+}
+
+const OverlayPreview = ({ images, initialIndex, onClose }: Props) => {
+  return (
+    <Box
+      pos={'absolute'}
+      top={0}
+      left={0}
+      w={'100%'}
+      h={'100%'}
+      opacity={1}
+      sx={{
+        zIndex: 1000,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        backdropFilter: 'blur(2px)',
+        overflow: 'hidden',
+      }}
+      tabIndex={0}
+      onLoad={(e) => {
+        e.currentTarget.focus()
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          onClose()
+        }
+      }}
+    >
+      <Flex h={'100vh'} w={'100%'}>
+        <Carousel
+          w={'100%'}
+          my={'auto'}
+          slideSize={'80%'}
+          slideGap={'md'}
+          initialSlide={initialIndex}
+          withIndicators
+          sx={{
+            overflowY: 'hidden',
+          }}
+          loop
+        >
+          {images.map((image) => {
+            return (
+              <Carousel.Slide key={image.url}>
+                <Center>
+                  <img
+                    src={image.url}
+                    style={{
+                      maxHeight: '100%',
+                      maxWidth: '100%',
+                      objectFit: 'contain',
+                    }}
+                  />
+                </Center>
+              </Carousel.Slide>
+            )
+          })}
+        </Carousel>
+        <Box h={'100%'} w={'400px'} bg={'dark'}></Box>
+      </Flex>
+      <CloseButton
+        variant={'filled'}
+        title={'Close previews'}
+        iconSize={16}
+        pos={'absolute'}
+        top={0}
+        left={0}
+        m={'md'}
+        onClick={onClose}
+      />
+    </Box>
+  )
+}
+
+export default OverlayPreview