From 48f37b7bf9516261ff9dae6cc11196f1cfe0ed55 Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Wed, 24 Jul 2024 14:47:57 -0300
Subject: [PATCH] feat: an effect was added to the images

---
 package-lock.json  | 15 ++++++++++++++-
 package.json       |  1 +
 src/pages/Book.tsx | 39 ++++++++++++++++++++++++++-------------
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cb0c8c0..b5245eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,6 @@
     "": {
       "name": "xbu",
       "version": "0.0.0",
-      "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "@chakra-ui/react": "2.8.2",
@@ -15,6 +14,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",
@@ -5074,6 +5074,14 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atropos": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/atropos/-/atropos-2.0.2.tgz",
+      "integrity": "sha512-8f0u0hEOlBTWTSvzY17TcHuQjxUIpkTBq70/I4+UF5B43ORtOoRjm8TPBYEgLM8Ba9AWf6PDtkagbYoybdjaKg==",
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -17189,6 +17197,11 @@
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
       "dev": true
     },
+    "atropos": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/atropos/-/atropos-2.0.2.tgz",
+      "integrity": "sha512-8f0u0hEOlBTWTSvzY17TcHuQjxUIpkTBq70/I4+UF5B43ORtOoRjm8TPBYEgLM8Ba9AWf6PDtkagbYoybdjaKg=="
+    },
     "available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
diff --git a/package.json b/package.json
index 309df7c..0d67b6d 100644
--- 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
index b060ab8..1df43cd 100644
--- 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