From 287fe8a50e53b937c61ad835eb329ec7c2b987ea Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Thu, 5 Sep 2024 17:52:08 +0530
Subject: [PATCH] =?UTF-8?q?Tilt=20Update=20=F0=9F=80=84=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json               |  7 +++++++
 package.json                    |  1 +
 src/Pages/Expenses/Expenses.jsx | 28 ++++++++++++++++++++++++----
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f85cd87..888f23b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "redux-persist": "^6.0.0",
         "redux-persist-transform-encrypt": "^5.1.1",
         "uuid": "^10.0.0",
+        "vanilla-tilt": "^1.8.1",
         "xlsx": "^0.18.5",
         "yup": "^1.4.0"
       },
@@ -6233,6 +6234,12 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vanilla-tilt": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
+      "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw==",
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "5.2.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.9.tgz",
diff --git a/package.json b/package.json
index fc21f64..4c8b075 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "redux-persist": "^6.0.0",
     "redux-persist-transform-encrypt": "^5.1.1",
     "uuid": "^10.0.0",
+    "vanilla-tilt": "^1.8.1",
     "xlsx": "^0.18.5",
     "yup": "^1.4.0"
   },
diff --git a/src/Pages/Expenses/Expenses.jsx b/src/Pages/Expenses/Expenses.jsx
index ac63c4d..a0ed7f4 100644
--- a/src/Pages/Expenses/Expenses.jsx
+++ b/src/Pages/Expenses/Expenses.jsx
@@ -1,12 +1,28 @@
 import { Box, Button, HStack, Image, Text, VStack } from "@chakra-ui/react";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 // import MiniHeader from "../Components/MiniHeader";
 import logo_card from "../../assets/logo_card.svg";
 import TRANSCORP_LOGO from "../../assets/TRANSCORP_LOGO.svg";
 import RuPay from '../../assets/rupayImg.png'
 import MiniHeader from "../../Components/MiniHeader";
+import VanillaTilt from "vanilla-tilt";
 
 const Expenses = () => {
+  const tiltRef = useRef(null);
+
+  useEffect(() => {
+    if (tiltRef.current) {
+      VanillaTilt.init(tiltRef.current, {
+        max: 15,
+        speed: 500,
+        scale:1.01,
+        glare: true,
+        "max-glare": 0.5,
+      });
+    }
+    return () => tiltRef.current.vanillaTilt.destroy(); // Cleanup on unmount
+  }, []);
+
   return (
     <Box h={"100%"} p={6}>
       <MiniHeader
@@ -14,20 +30,24 @@ const Expenses = () => {
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
       />
 
-      <HStack justifyContent={"start"} w={"100%"} h={"364px"} gap={4}>
+      <HStack justifyContent={"start"} w={"100%"} h={"372px"} gap={4}>
+
+
         <VStack
+          ref={tiltRef} // Attach tilt to this ref
           // bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
           bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
           alignItems={"start"}
           justifyContent={"space-between"}
           height={"100%"}
           w={240}
+          h={"372px"}
           rounded={"xl"}
           p={4}
           boxShadow={"md"}
           position={"relative"}
         >
-          <Box width={"100%"} display={"flex"} justifyContent={"space-between"}>
+          <Box width={"100%"} cursor={'grab'} display={"flex"} justifyContent={"space-between"}>
             <Image w={20} src={logo_card} />
             <Image w={24} src={TRANSCORP_LOGO} me={0.5} />
           </Box>
@@ -73,7 +93,7 @@ const Expenses = () => {
           </Text>
         </VStack>
 
-        <VStack bg={"pink"} height={"100%"} w={"50%"} rounded={"xl"}></VStack>
+        <VStack bg={"pink"} height={"100%"} flexGrow={1}   rounded={"xl"}></VStack>
 
         <VStack bg={"purple"} height={"100%"} w={"27%"} rounded={"xl"}></VStack>
       </HStack>