completed some features in market place

app/src/modules/market/AssetPreview.tsx

@@ -1,11 +1,15 @@
-import React from "react";
+import React, { Suspense, useEffect } from "react";
 import assetImage from "../../assets/image/image.png";
 import { FiileedStarsIconSmall } from "../../components/icons/marketPlaceIcons";
+import { Canvas, useThree } from "@react-three/fiber";
+import { ContactShadows, OrbitControls, Text } from "@react-three/drei";
+import GltfLoader from "./GltfLoader";
+import * as THREE from "three";
 
 // Define the shape of the selected card
 interface SelectedCard {
   assetName: string;
-  uploadedOn: string;
+  uploadedOn: number;
   price: number;
   rating: number;
   views: number;
@@ -17,6 +21,14 @@ interface AssetPreviewProps {
   setSelectedCard: React.Dispatch<React.SetStateAction<SelectedCard | null>>; // Type for setter function
 }
 
+function Ui() {
+  return (
+    <Text color="#6f42c1" anchorX="center" anchorY="middle" scale={0.3}>
+      Loading your model...
+    </Text>
+  );
+}
+
 const AssetPreview: React.FC<AssetPreviewProps> = ({
   selectedCard,
   setSelectedCard,
@@ -27,8 +39,6 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
     Math.min(5, isNaN(selectedCard.rating) ? 0 : selectedCard.rating)
   );
 
-  console.log("selectedCard: ", selectedCard);
-
   // Ensure that the rating is a valid positive integer for array length
   const starsArray = Array.from({ length: rating }, (_, index) => index);
 
@@ -36,8 +46,38 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
     <div className="assetPreview-wrapper">
       <div className="assetPreview">
         <div className="image-preview">
-          <img src={assetImage} alt="" />
+          {/* <img src={assetImage} alt="" /> */}
           {/* Add canvas here */}
+          <div className="canvas-container" style={{ height: "100%" }}>
+            <Canvas
+              flat
+              shadows
+              color="#FFFFFF"
+              camera={{ fov: 75 }}
+              gl={{
+                preserveDrawingBuffer: true,
+              }}
+              onCreated={({ scene }) => {
+                scene.background = new THREE.Color(0xffffff);
+              }}
+            >
+              <Suspense fallback={<Ui />}>
+                {selectedCard.assetName && (
+                  <GltfLoader fromServer={selectedCard.assetName} />
+                )}
+                <OrbitControls minPolarAngle={0} maxPolarAngle={Math.PI / 2} />
+                <ContactShadows
+                  renderOrder={2}
+                  frames={1}
+                  resolution={1024}
+                  scale={120}
+                  blur={2}
+                  opacity={0.4}
+                  far={100}
+                />
+              </Suspense>
+            </Canvas>
+          </div>
         </div>
 
         <div className="asset-details-preview">