feat: an effect was added to the images

Franqsanz · Jul 24, 2024 · 48f37b7 · 48f37b7
1 parent 6ef4bd0
commit 48f37b7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@emotion/styled": "11.13.0",
     "@tanstack/react-query": "5.51.11",
     "@tanstack/react-query-devtools": "5.51.11",
+    "atropos": "2.0.2",
     "chakra-react-select": "4.9.1",
     "firebase": "10.12.4",
     "framer-motion": "11.3.8",

diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
@@ -23,6 +23,8 @@ import {
 import { BsTag } from 'react-icons/bs';
 import { FaCheckCircle } from 'react-icons/fa';
 import LazyLoad from 'react-lazy-load';
+import Atropos from 'atropos/react';
+import 'atropos/css';
 
 import { useBook, useDeleteBook } from '@hooks/queries';
 import { handleImageLoad } from '@utils/utils';
@@ -453,19 +455,30 @@ export default function Book() {
               zIndex='1'
             >
               <LazyLoad width={290} height={420} offset={0} threshold={0.99}>
-                <ImageZoom
-                  w='290px'
-                  h='420px'
-                  src={data.image.url}
-                  alt={`Imagen de "${data.title}"`}
-                  rounded='lg'
-                  border='1px solid #A0AEC0'
-                  boxShadow='lg'
-                  decoding='async'
-                  filter='blur(10px)'
-                  transition='filter 0.5s ease-in-out'
-                  onLoad={handleImageLoad}
-                />
+                <Atropos
+                  highlight={true}
+                  rotateTouch={false}
+                  rotateXMax={30}
+                  rotateYMax={30}
+                  stretchX={45}
+                  stretchY={45}
+                  duration={200}
+                  shadow={false}
+                >
+                  <ImageZoom
+                    w='290px'
+                    h='420px'
+                    src={data.image.url}
+                    alt={`Imagen de "${data.title}"`}
+                    rounded='lg'
+                    border='1px solid #A0AEC0'
+                    boxShadow='lg'
+                    decoding='async'
+                    filter='blur(10px)'
+                    transition='filter 0.5s ease-in-out'
+                    onLoad={handleImageLoad}
+                  />
+                </Atropos>
               </LazyLoad>
             </Flex>
             <Image