chore: added zoom in images and other changes

package.json

@@ -29,6 +29,7 @@
     "chakra-react-select": "4.7.6",
     "firebase": "10.5.2",
     "framer-motion": "10.16.4",
+    "medium-zoom": "1.1.0",
     "million": "2.6.4",
     "nanoid": "5.0.3",
     "pako": "2.1.0",

src/components/ImageZoom.tsx

@@ -0,0 +1,34 @@
+import React, { useRef } from 'react';
+import { Image, ImageProps } from '@chakra-ui/react';
+import mediumZoom, { Zoom, ZoomOptions, ZoomSelector } from 'medium-zoom';
+
+type ImageZoomProps = ImageProps & {
+  options?: ZoomOptions;
+};
+
+export function ImageZoom({ options, ...props }: ImageZoomProps) {
+  const zoomRef = useRef<Zoom | null>(null);
+
+  function getZoom() {
+    if (zoomRef.current === null) {
+      zoomRef.current = mediumZoom({
+        background: '#000000d6',
+        margin: 70,
+      });
+    }
+
+    return zoomRef.current;
+  }
+
+  function attachZoom(node: ZoomSelector) {
+    const zoom = getZoom();
+
+    if (node) {
+      zoom.attach(node);
+    } else {
+      zoom.detach();
+    }
+  }
+
+  return <Image {...props} ref={attachZoom} />;
+}

src/components/cards/RelatedCard.tsx

@@ -22,7 +22,7 @@ export function RelatedCard({
     <>
       <Box
         w='full'
-        h={{ base: 'auto', md: '245px' }}
+        h={{ base: 'auto', md: '270px' }}
         mx={{ base: 0, md: 2 }}
         rounded='xl'
         border='1px'

src/pages/Book.tsx

@@ -24,6 +24,7 @@ import { MyTag } from '../components/MyTag';
 import { ModalShare } from '../components/ModalShare';
 import { MyLink } from '../components/MyLink';
 import { BooksSection } from '../components/BooksSection';
+import { ImageZoom } from '../components/ImageZoom';
 
 const Categories = lazy(() => import('../components/Categories'));
 const MoreBooksAuthors = lazy(
@@ -130,7 +131,7 @@ export default function Book() {
           pb='4'
         >
           <LazyLoad width={230} height={340} offset={0} threshold={0.99}>
-            <Image
+            <ImageZoom
               w='230px'
               h='340px'
               src={data.image.url}
@@ -334,7 +335,7 @@ export default function Book() {
               position='relative'
             >
               <LazyLoad width={290} height={420} offset={0} threshold={0.99}>
-                <Image
+                <ImageZoom
                   w='290px'
                   h='420px'
                   src={data.image.url}
@@ -346,6 +347,7 @@ export default function Book() {
                   filter='blur(10px)'
                   transition='filter 0.5s ease-in-out'
                   onLoad={handleImageLoad}
+                  zIndex='9999'
                 />
               </LazyLoad>
             </Flex>
@@ -382,6 +384,7 @@ export default function Book() {
               }}
             >
               <Box
+                w='270px'
                 p='1.25rem 2px 2px 2px'
                 h='24'
                 fontSize='2xl'
@@ -392,20 +395,19 @@ export default function Book() {
                 Categorías
                 <Box mt='2' borderBottom='1px'></Box>
               </Box>
-              <Center h='80%'>
-                <Suspense
-                  fallback={
-                    <Center>
-                      <Spinner size='lg' />
-                    </Center>
-                  }
-                >
-                  <Flex direction='column' flexWrap='wrap'>
-                    <Categories />
-                  </Flex>
-                </Suspense>
-              </Center>
+              <Suspense
+                fallback={
+                  <Center h='500px'>
+                    <Spinner size='lg' />
+                  </Center>
+                }
+              >
+                <Flex direction='column' flexWrap='wrap'>
+                  <Categories />
+                </Flex>
+              </Suspense>
               <Box
+                w='270px'
                 position='sticky'
                 h='7'
                 bottom='0'