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-name">{assetName.split("_").join(" ")}</div>
-          <div className="assets-date">{uploadedOn}</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> */}
+        {models.length > 0 &&
-          {selectedCard && (
+          models.map((assetDetail) => (
-            <AssetPreview
+            <Card
-              selectedCard={selectedCard}
+              key={assetDetail._id}
-              setSelectedCard={setSelectedCard}
+              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>

app/src/services/marketplace/fetchAssets.ts

@@ -0,0 +1,14 @@
+let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
+export const fetchAssets = async () => {
+  try {
+    const response = await fetch(`${BackEnd_url}/api/v1/getAllAssets`);
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    console.log("error: ", error);
+    // throw new Error(error.message);
+  }
+};

app/src/styles/components/marketPlace/marketPlace.scss

@@ -8,6 +8,7 @@
   background-color: var(--background-color-secondary);
   position: absolute;
   left: 0;
+  top: 0;
   padding: 100px 50px;
   padding-bottom: 32px;
   backdrop-filter: blur(6px);
@@ -89,6 +90,7 @@
         color: var(--text-color);
         font-weight: $medium-weight;
         font-size: $xlarge;
+        margin-bottom: 12px;
       }
 
       .cards-wrapper-container {
@@ -122,7 +124,13 @@
           .image-container {
             width: 100%;
             display: flex;
+            max-height: 180px;
             justify-content: center;
+            img{
+              height: inherit;
+              width: 100%;
+              object-fit: cover;
+            }
           }
 
           .assets-container {
@@ -133,6 +141,9 @@
               display: flex;
               flex-direction: column;
               gap: 3px;
+              .assets-name{
+                text-transform: capitalize;
+              }
 
               .asstes-container {
                 font-weight: #{$bold-weight};