first commit

app/src/modules/market/AssetPreview.tsx

@@ -0,0 +1,133 @@
+import React, { Suspense } from "react";
+import { FilledStarsIconSmall } from "../../components/icons/marketPlaceIcons";
+import { Canvas } 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: number;
+  price: number;
+  rating: number;
+  views: number;
+  description: string;
+  AssetID: string;
+}
+
+// Define the props type for AssetPreview
+interface AssetPreviewProps {
+  selectedCard: SelectedCard;
+  modelUrl: string;
+  setSelectedCard: React.Dispatch<React.SetStateAction<SelectedCard | null>>; // Type for setter function
+}
+
+const savedTheme: string | null = localStorage.getItem("theme");
+
+function Ui() {
+  return (
+    <Text
+      color={savedTheme === "dark" ? "#d2baff" : "#6f42c1"}
+      anchorX="center"
+      anchorY="middle"
+      scale={0.3}
+    >
+      Loading preview...
+    </Text>
+  );
+}
+
+const AssetPreview: React.FC<AssetPreviewProps> = ({
+  selectedCard,
+  setSelectedCard,
+  modelUrl,
+}) => {
+  return (
+    <div className="assetPreview-wrapper">
+      <div className="assetPreview">
+        <div className="image-preview">
+          {/* <img src={assetImage} alt="" /> */}
+          {/* Add canvas here */}
+          <div className="canvas-container" style={{ height: "100%" }}>
+            <Canvas
+              flat
+              shadows
+              camera={{ fov: 75 }}
+              gl={{
+                preserveDrawingBuffer: true,
+              }}
+              onCreated={({ scene }) => {
+                scene.background = new THREE.Color(
+                  savedTheme === "dark" ? 0x19191d : 0xfcfdfd
+                );
+              }}
+            >
+              <Suspense fallback={<Ui />}>
+                {selectedCard.assetName && modelUrl && (
+                  <GltfLoader
+                    fromServer={modelUrl}
+                    assetId={selectedCard?.AssetID}
+                  />
+                )}
+                <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">
+          <div className="organization">
+            <div className="image">H</div>
+            <div className="organization-details">
+              <div className="organization-name">HERX FACTORY</div>
+              <div className="follow">Follow +</div>
+            </div>
+          </div>
+
+          {/* asset details */}
+          <div className="asset-details">
+            <div className="asset-name">{selectedCard.assetName}</div>
+            <div className="asset-description">
+              {`${selectedCard.description}`}
+            </div>
+            <div className="asset-review">
+              <div className="asset-rating">
+                <FilledStarsIconSmall />
+                {selectedCard.rating}
+              </div>
+              <div className="asset-view">{selectedCard.views} views</div>
+            </div>
+            <div className="asset-price">₹ {selectedCard.price}</div>
+          </div>
+
+          {/* buttons */}
+          <div className="button-container">
+            <div className="button">Add to cart</div>
+            <div className="button">Buy now</div>
+          </div>
+
+          {/* close button */}
+          <button
+            id="asset-back-buttton"
+            className="closeButton"
+            onClick={() => setSelectedCard(null)}
+          >
+            {`<-back`}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AssetPreview;