126 lines
4.4 KiB
TypeScript
126 lines
4.4 KiB
TypeScript
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;
|
|
description: string;
|
|
}
|
|
|
|
// 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">
|
|
{`${selectedCard.assetName} is used in factories to improve efficiency and production speed It is designed to handle heavy workloads and perform repetitive tasks with precision. Many industries rely on this machine to manufacture products quickly and accurately. It reduces human effort and minimizes errors in the production process. Regular maintenance is required to keep the machine in good working condition.With advanced technology, this machine continues to enhance industrial operations and increase productivity.`}
|
|
</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;
|