96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
|
import React from "react";
|
||
|
|
import assetImage from "../../assets/image/image.png";
|
||
|
|
import { FiileedStarsIconSmall } from "../../components/icons/marketPlaceIcons";
|
||
|
|
|
||
|
|
// Define the shape of the selected card
|
||
|
|
interface SelectedCard {
|
||
|
|
assetName: string;
|
||
|
|
uploadedOn: string;
|
||
|
|
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
|
||
|
|
}
|
||
|
|
|
||
|
|
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)
|
||
|
|
);
|
||
|
|
|
||
|
|
console.log("selectedCard: ", selectedCard);
|
||
|
|
|
||
|
|
// 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="" />
|
||
|
|
</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;
|