134 lines
3.9 KiB
TypeScript
134 lines
3.9 KiB
TypeScript
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;
|