solved ui bugs marketplace

app/src/modules/market/Card.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   CommentsIcon,
   DownloadIcon,
@@ -11,13 +11,14 @@ import assetImage from "../../assets/image/image.png";
 
 interface CardProps {
   assetName: string;
-  uploadedOn: string;
+  uploadedOn: number;
   price: number;
   rating: number;
   views: number;
+  image: string;
   onSelectCard: (cardData: {
     assetName: string;
-    uploadedOn: string;
+    uploadedOn: number;
     price: number;
     rating: number;
     views: number;
@@ -30,6 +31,7 @@ const Card: React.FC<CardProps> = ({
   price,
   rating,
   views,
+  image,
   onSelectCard,
 }) => {
   const handleCardSelect = () => {
@@ -42,12 +44,19 @@ const Card: React.FC<CardProps> = ({
         <DownloadIcon />
       </div>
       <div className="image-container">
-        <img src={assetImage} alt={assetName} />
+        <img src={image} alt={assetName} />
       </div>
       <div className="assets-container">
         <div className="name-container">
-          <div className="assets-name">{assetName}</div>
-          <div className="assets-date">{uploadedOn}</div>
+          <div className="assets-name">{assetName.split("_").join(" ")}</div>
+          <div className="assets-date">
+            Uploaded on -{" "}
+            {new Date(uploadedOn).toLocaleDateString("en-GB", {
+              day: "2-digit",
+              month: "short",
+              year: "2-digit",
+            })}
+          </div>
         </div>
         <div className="details">
           <div className="content">

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>