76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import Card from "./Card";
|
|
import AssetPreview from "./AssetPreview";
|
|
|
|
interface ModelData {
|
|
CreatedBy: string;
|
|
animated: string | null;
|
|
category: string;
|
|
description: string;
|
|
filename: string;
|
|
isArchieve: boolean;
|
|
modelfileID: string;
|
|
tags: string;
|
|
thumbnail: string;
|
|
uploadDate: number;
|
|
_id: string;
|
|
price: number;
|
|
}
|
|
interface ModelsProps {
|
|
models: ModelData[];
|
|
}
|
|
|
|
const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
|
|
const [selectedCard, setSelectedCard] = useState<{
|
|
assetName: string;
|
|
uploadedOn: number;
|
|
price: number;
|
|
rating: number;
|
|
views: number;
|
|
description: string;
|
|
} | null>(null);
|
|
|
|
const handleCardSelect = (cardData: {
|
|
assetName: string;
|
|
uploadedOn: number;
|
|
price: number;
|
|
rating: number;
|
|
views: number;
|
|
description: string;
|
|
}) => {
|
|
setSelectedCard(cardData);
|
|
};
|
|
|
|
return (
|
|
<div className="cards-container-container">
|
|
<div className="header">Products You May Like</div>
|
|
<div className="cards-wrapper-container">
|
|
{models.length > 0 &&
|
|
models.map((assetDetail) => (
|
|
<Card
|
|
key={assetDetail._id}
|
|
assetName={assetDetail?.filename}
|
|
uploadedOn={assetDetail.uploadDate}
|
|
price={assetDetail?.price}
|
|
rating={4.5}
|
|
views={800}
|
|
onSelectCard={handleCardSelect}
|
|
image={assetDetail.thumbnail}
|
|
description={assetDetail.description}
|
|
/>
|
|
))}
|
|
{/* <RenderOverlay> */}
|
|
{selectedCard && (
|
|
<AssetPreview
|
|
selectedCard={selectedCard}
|
|
setSelectedCard={setSelectedCard}
|
|
/>
|
|
)}
|
|
{/* </RenderOverlay> */}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CardsContainer;
|