Add elf pages

2023-07-14 09:48:09 +09:00
parent afafab1956
commit 679ffe48b9
14 changed files with 560 additions and 18 deletions
@@ -0,0 +1,50 @@
+/* eslint-disable jsx-a11y/alt-text */
+import { Box, Flex, Image } from 'theme-ui'
+
+interface ResizedImageProps {
+  src: string | string[]
+  originalWidth: number
+  originalHeight: number
+  ratio?: number
+  alignItems?: string
+}
+
+const ResizedImage = ({ src, originalWidth, originalHeight, ratio = 1, alignItems = 'center' }: ResizedImageProps) => {
+  if (typeof src === 'string') {
+    src = [src]
+  }
+  const targetWidth = originalWidth * ratio
+  const targetHeight = originalHeight * ratio
+  return (
+    <Box sx={{ width: targetWidth, height: targetHeight, position: 'relative' }}>
+      <Box
+        sx={{
+          position: 'absolute',
+          left: (targetWidth - originalWidth) / 2,
+          top: (targetHeight - originalHeight) / 2
+        }}
+      >
+        {src.map((aSrc, index) => {
+          return (
+            <Flex
+              key={index}
+              sx={{
+                position: 'absolute',
+                width: originalWidth,
+                height: originalHeight,
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 1,
+                transform: `scale(${ratio})`
+              }}
+            >
+              <Image src={aSrc} />
+            </Flex>
+          )
+        })}
+      </Box>
+    </Box>
+  )
+}
+
+export default ResizedImage