refactor: add nftMedia type in utils

Author: 911-Benedek-RobertGeorge

src/components/DataNftCard.tsx

@@ -3,20 +3,13 @@ import { DataNft } from "@itheum/sdk-mx-data-nft/out";
 import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks/useGetNetworkConfig";
 import { MARKETPLACE_DETAILS_PAGE } from "config";
 import { cn } from "libs/utils";
-import ImageSlider from "./ImageSlider";
 import { Modal } from "./Modal/Modal";
 import { MXAddressLink } from "./MXAddressLink";
 import NftMediaComponent from "./NftMediaComponent";
 import { Button } from "../libComponents/Button";
 import { Card, CardContent, CardFooter } from "../libComponents/Card";
 import { IFilterData } from "../libComponents/Filter";
-export interface NftMedia {
-  url: string;
-  originalUrl: string;
-  thumbnailUrl: string;
-  fileType: string;
-  fileSize: number;
-}
+import { NftMedia } from "libs/types";
 
 export function DataNftCard({
   index,

src/components/ImageSlider.tsx

@@ -1,9 +1,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 { ArrowLeft, ArrowRight } from "lucide-react";
 import { Button } from "libComponents/Button";
-import NftMediaComponent from "./NftMediaComponent";
 
 interface ImageSliderProps {
   media: { url: string; type: string }[];

src/components/NftMediaComponent.tsx

@@ -1,6 +1,6 @@
+import { NftMedia } from "libs/types";
 import { cn } from "libs/utils";
 import React from "react";
-import { NftMedia } from "./DataNftCard";
 import ImageSlider from "./ImageSlider";
 
 interface NftMediaComponentProps {

src/libs/types/common.ts

@@ -18,3 +18,10 @@ export interface TrendingNft {
   tokenIdentifier: string;
   rating: number;
 }
+export interface NftMedia {
+  url: string;
+  originalUrl: string;
+  thumbnailUrl: string;
+  fileType: string;
+  fileSize: number;
+}

src/pages/Account/MyListed/index.tsx

@@ -12,6 +12,7 @@ import { Card, CardContent } from "libComponents/Card";
 import { ExternalLink } from "lucide-react";
 import ImageSlider from "components/ImageSlider";
 import NftMediaComponent from "components/NftMediaComponent";
+import { NftMedia } from "libs/types";
 
 export const MyListed = () => {
   const {
@@ -76,11 +77,7 @@ export const MyListed = () => {
                 <Card className="border-[0.5px] dark:border-slate-100/30 border-slate-300 bg-transparent rounded-[2.37rem] xl:w-[330px] w-[296px] pb-5">
                   <CardContent className="flex flex-col p-6 ">
                     <div className="mb-4">
-                      {dataNft.extraAssets.length > 0 ? (
-                        <ImageSlider imageUrls={dataNft.media.map((mediaObj: any) => mediaObj.url) ?? [dataNft.nftImgUrl]} autoSlide />
-                      ) : (
-                        <NftMediaComponent nftMediaUrl={dataNft.nftImgUrl} isLoading={isLoading} mediaStyle="mb-8  base:max-h-[15rem] md:max-h-[18rem] " />
-                      )}
+                      <NftMediaComponent nftMedia={dataNft.media as NftMedia[]} isLoading={isLoading} mediaStyle="mb-8 base:h-[15rem]  md:h-[18rem]" />
                     </div>
                     <div className="xl:h-[300px] h-[315px]">
                       <div className="mb-1">