Dwinzo_dev/app/src/modules/market/AssetPreview.tsx

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: number;
  price: number;
  rating: number;
  views: number;
}

// Define the props type for AssetPreview
interface AssetPreviewProps {
  selectedCard: SelectedCard;
  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,
}) => {
  // Ensure rating is a valid number between 0 and 5
  const rating = Math.max(
    0,
    Math.min(5, isNaN(selectedCard.rating) ? 0 : selectedCard.rating)
  );

  // Ensure that the rating is a valid positive integer for array length
  const starsArray = Array.from({ length: rating }, (_, index) => index);

  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
              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">
          <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">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Doloremque nisi beatae facilis architecto quaerat delectus velit
              aliquid assumenda cumque vitae! Tempore quibusdam ab natus in
              minima voluptates, aliquid corrupti excepturi consectetur
              distinctio sequi beatae odit autem? Distinctio ab, voluptatem
              omnis quibusdam, incidunt eum ipsa aliquid enim eaque eveniet nisi
              autem, accusantium vel! Laborum in iste voluptates ad! Harum eum
              amet pariatur fugit laudantium dolorem maxime voluptates atque
              molestiae modi inventore quidem maiores dolore numquam, natus
              quisquam optio distinctio eveniet aliquam, aut eligendi laboriosam
              eaque! Porro cumque cum distinctio ullam debitis, dolorum
              similique! Harum cupiditate perferendis voluptatum molestiae,
              fugiat quisquam assumenda!
            </div>
            <div className="asset-review">
              <div className="asset-rating">
                <FiileedStarsIconSmall />
                {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 */}
          <div className="closeButton" onClick={() => setSelectedCard(null)}>
            {`<-back`}
          </div>
        </div>
      </div>
    </div>
  );
};

export default AssetPreview;