D robert

src/components/ImageSlider.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import { ArrowLeft, ArrowRight, Image } from "lucide-react";
 import { cn } from "libs/utils";
+import { Button } from "libComponents/Button";
 
 interface ImageSliderProps {
   imageUrls: string[];
@@ -60,28 +61,35 @@ const ImageSlider: React.FC<ImageSliderProps> = (props) => {
           }}>
           <img className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto" src={imageUrls[imageIndex]} onLoad={onLoad} />
         </motion.div>
-        <motion.div
-          initial={{ rotateY: 180 }}
-          animate={{ rotateY: makeFlip ? 0 : 180 }}
-          transition={spring}
-          style={{
-            width: "100%",
-            height: "100%",
-            opacity: makeFlip ? 1 : 0,
-            backfaceVisibility: "hidden",
-            position: "absolute",
-          }}
-          onAnimationComplete={() => {
-            setImageIndex(nextImageIndex);
-          }}>
-          <img className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto" src={imageUrls[nextImageIndex]} onLoad={onLoad} />
-        </motion.div>
+        {makeFlip && (
+          <motion.div
+            initial={{ rotateY: 180 }}
+            animate={{ rotateY: makeFlip ? 0 : 180 }}
+            transition={spring}
+            style={{
+              width: "100%",
+              height: "100%",
+              opacity: makeFlip ? 1 : 0,
+              backfaceVisibility: "hidden",
+              position: "absolute",
+            }}
+            onAnimationComplete={() => {
+              setImageIndex(nextImageIndex);
+            }}>
+            <img className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto" src={imageUrls[nextImageIndex]} onLoad={onLoad} />
+          </motion.div>
+        )}
       </div>
       {imageUrls.length > 1 && (
-        <div className="z-10 flex flex-row h-full w-full justify-center items-end my-2 mt-6 gap-2 ">
-          <ArrowLeft onClick={() => goToPreviousImage(true)} />
-
-          <ArrowRight onClick={() => goToNextImage(true)} />
+        <div className="z-10 flex flex-row h-full w-full justify-center items-end my-2 mt-8 gap-2 ">
+          <Button className="p-1 h-6  !rounded-3xl" disabled={makeFlip}>
+            {" "}
+            <ArrowLeft onClick={() => goToPreviousImage(true)} />
+          </Button>
+          <Button className="p-1 h-6 !rounded-3xl" disabled={makeFlip}>
+            {" "}
+            <ArrowRight onClick={() => goToNextImage(true)} />{" "}
+          </Button>
         </div>
       )}
     </div>

src/components/RecentDataNftsSection.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { DataNft, Offer } from "@itheum/sdk-mx-data-nft/out";
 import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks";
 import { getHealthCheckFromBackendApi, getRecentOffersFromBackendApi } from "../libs/backend-api";
-import { ThreeDCard } from "./TreeDCard";
+import { ThreeDCard } from "./ThreeDCard";
 import { IAddress } from "@multiversx/sdk-core/out";
 import BigNumber from "bignumber.js";
 import { Address } from "@multiversx/sdk-core/out";

src/components/TrendingSection.tsx

@@ -1,17 +1,15 @@
 import { DataNft } from "@itheum/sdk-mx-data-nft/out";
 import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks";
 import { getHealthCheckFromBackendApi, getTrendingFromBackendApi } from "libs/backend-api";
-import { TrendingNft } from "libs/types";
 import React, { useEffect, useState } from "react";
-import { ThreeDCard } from "./TreeDCard";
-import { convertWeiToEsdt } from "libs/utils";
+import { ThreeDCard } from "./ThreeDCard";
 import toast from "react-hot-toast";
 
-interface NftItem {
-  title: string;
-  supply: number;
-  price: number;
-}
+// interface NftItem {
+//   title: string;
+//   supply: number;
+//   price: number;
+// }
 type TrendingDataCreationNftsType = {
   nonce: number;
   tokenIdentifier: string;