105 lines
2.5 KiB
TypeScript
105 lines
2.5 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import {
|
|
CommentsIcon,
|
|
DownloadIcon,
|
|
EyeIconBig,
|
|
FilledStarsIconSmall,
|
|
StarsIconSmall,
|
|
VerifiedIcon,
|
|
} from "../../components/icons/marketPlaceIcons";
|
|
|
|
import assetImage from "../../assets/image/image.png";
|
|
import { getAssetDownload } from "../../services/marketplace/getAssetDownload";
|
|
|
|
interface CardProps {
|
|
assetName: string;
|
|
uploadedOn: number;
|
|
price: number;
|
|
rating: number;
|
|
views: number;
|
|
image: string;
|
|
description: string;
|
|
onSelectCard: (cardData: {
|
|
assetName: string;
|
|
uploadedOn: number;
|
|
price: number;
|
|
rating: number;
|
|
views: number;
|
|
description: string;
|
|
}) => void;
|
|
}
|
|
|
|
const Card: React.FC<CardProps> = ({
|
|
assetName,
|
|
uploadedOn,
|
|
price,
|
|
rating,
|
|
views,
|
|
image,
|
|
description,
|
|
onSelectCard,
|
|
}) => {
|
|
const handleCardSelect = () => {
|
|
onSelectCard({ assetName, uploadedOn, price, rating, views, description });
|
|
};
|
|
|
|
return (
|
|
<div className="card-container">
|
|
{/* <a href={getAssetDownload(assetName)} download className="icon">
|
|
<DownloadIcon />
|
|
</a> */}
|
|
<div className="image-container">
|
|
<img src={image} alt={assetName} />
|
|
</div>
|
|
<div className="assets-container">
|
|
<div className="name-container">
|
|
<div className="assets-name">{assetName.split("_").join(" ")}</div>
|
|
<div className="assets-date">
|
|
Uploaded on -{" "}
|
|
{new Date(uploadedOn).toLocaleDateString("en-GB", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "2-digit",
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="details">
|
|
<div className="content">
|
|
<EyeIconBig />
|
|
{views}
|
|
</div>
|
|
<div className="content">
|
|
<CommentsIcon />
|
|
32
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vendor-icon">
|
|
HEXR FACTORY <VerifiedIcon />
|
|
</div>
|
|
<div className="stars-container">
|
|
<div className="stars-wrapper">
|
|
{[...Array(5)].map((_, index) => (
|
|
<>
|
|
{index < 3 ? (
|
|
<FilledStarsIconSmall key={index} />
|
|
) : (
|
|
<StarsIconSmall key={index} />
|
|
)}
|
|
</>
|
|
))}
|
|
</div>
|
|
<div className="units">
|
|
₹ {price}/<span>unit</span>
|
|
</div>
|
|
</div>
|
|
<div className="buy-now-button" onClick={handleCardSelect}>
|
|
Buy now
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Card;
|