solved ui bugs marketplace

app/src/modules/market/CardsContainer.tsx

@@ -1,9 +1,25 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Card from "./Card";
 import AssetPreview from "./AssetPreview";
 import RenderOverlay from "../../components/templates/Overlay";
+import { fetchAssets } from "../../services/marketplace/fetchAssets";
+interface ModelData {
+  CreatedBy: string;
+  animated: string | null;
+  category: string;
+  description: string;
+  filename: string;
+  isArchieve: boolean;
+  modelfileID: string;
+  tags: string;
+  thumbnail: string;
+  uploadDate: number;
+  _id: string;
+}
 
 const CardsContainer: React.FC = () => {
+  const [models, setModels] = useState<ModelData[]>([]);
+
   const array = [
     {
       id: 1,
@@ -105,7 +121,7 @@ const CardsContainer: React.FC = () => {
 
   const [selectedCard, setSelectedCard] = useState<{
     assetName: string;
-    uploadedOn: string;
+    uploadedOn: number;
     price: number;
     rating: number;
     views: number;
@@ -113,19 +129,30 @@ const CardsContainer: React.FC = () => {
 
   const handleCardSelect = (cardData: {
     assetName: string;
-    uploadedOn: string;
+    uploadedOn: number;
     price: number;
     rating: number;
     views: number;
   }) => {
     setSelectedCard(cardData);
   };
-
+  const getAllAssets = async () => {
+    try {
+      const assetsData = await fetchAssets();
+      const reversedData = [...assetsData]?.reverse().slice(0, 8);
+      setModels(reversedData);
+    } catch (error) {
+    } finally {
+    }
+  };
+  useEffect(() => {
+    getAllAssets();
+  }, []);
   return (
     <div className="cards-container-container">
       <div className="header">Products You May Like</div>
       <div className="cards-wrapper-container">
-        {array.map((asset) => (
+        {/* {array.map((asset) => (
           <Card
             key={asset.id}
             assetName={asset.name}
@@ -135,14 +162,27 @@ const CardsContainer: React.FC = () => {
             views={asset.views}
             onSelectCard={handleCardSelect}
           />
-        ))}
-        {/* <RenderOverlay> */}
-          {selectedCard && (
-            <AssetPreview
-              selectedCard={selectedCard}
-              setSelectedCard={setSelectedCard}
+        ))} */}
+        {models.length > 0 &&
+          models.map((assetDetail) => (
+            <Card
+              key={assetDetail._id}
+              assetName={assetDetail?.filename}
+              uploadedOn={assetDetail.uploadDate}
+              price={36500}
+              rating={4.5}
+              views={500}
+              onSelectCard={handleCardSelect}
+              image={assetDetail.thumbnail}
             />
-          )}
+          ))}
+        {/* <RenderOverlay> */}
+        {selectedCard && (
+          <AssetPreview
+            selectedCard={selectedCard}
+            setSelectedCard={setSelectedCard}
+          />
+        )}
         {/* </RenderOverlay> */}
       </div>
     </div>