Dwinzo_dev/app/src/modules/market/CardsContainer.tsx

import React, { useState } from "react";
import Card from "./Card";
import AssetPreview from "./AssetPreview";
import RenderOverlay from "../../components/templates/Overlay";

const CardsContainer: React.FC = () => {
  const array = [
    {
      id: 1,
      name: "Asset 1",
      uploadedOn: "12 Jan 23",
      price: 36500,
      rating: 4.5,
      views: 500,
    },
    {
      id: 2,
      name: "Asset 2",
      uploadedOn: "14 Jan 23",
      price: 45000,
      rating: 4.0,
      views: 500,
    },
    {
      id: 3,
      name: "Asset 3",
      uploadedOn: "15 Jan 23",
      price: 52000,
      rating: 4.8,
      views: 500,
    },
    {
      id: 4,
      name: "Asset 4",
      uploadedOn: "18 Jan 23",
      price: 37000,
      rating: 3.9,
      views: 500,
    },
    {
      id: 5,
      name: "Asset 5",
      uploadedOn: "20 Jan 23",
      price: 60000,
      rating: 5.0,
      views: 500,
    },
    {
      id: 6,
      name: "Asset 6",
      uploadedOn: "22 Jan 23",
      price: 46000,
      rating: 4.2,
      views: 500,
    },
    {
      id: 7,
      name: "Asset 7",
      uploadedOn: "25 Jan 23",
      price: 38000,
      rating: 4.3,
      views: 500,
    },
    {
      id: 8,
      name: "Asset 8",
      uploadedOn: "27 Jan 23",
      price: 41000,
      rating: 4.1,
      views: 500,
    },
    {
      id: 9,
      name: "Asset 9",
      uploadedOn: "30 Jan 23",
      price: 55000,
      rating: 4.6,
      views: 500,
    },
    {
      id: 10,
      name: "Asset 10",
      uploadedOn: "2 Feb 23",
      price: 49000,
      rating: 4.4,
      views: 500,
    },
    {
      id: 11,
      name: "Asset 11",
      uploadedOn: "5 Feb 23",
      price: 62000,
      rating: 5.0,
      views: 500,
    },
    {
      id: 12,
      name: "Asset 12",
      uploadedOn: "7 Feb 23",
      price: 53000,
      rating: 4.7,
      views: 500,
    },
  ];

  const [selectedCard, setSelectedCard] = useState<{
    assetName: string;
    uploadedOn: string;
    price: number;
    rating: number;
    views: number;
  } | null>(null);

  const handleCardSelect = (cardData: {
    assetName: string;
    uploadedOn: string;
    price: number;
    rating: number;
    views: number;
  }) => {
    setSelectedCard(cardData);
  };

  return (
    <div className="cards-container-container">
      <div className="header">Products You May Like</div>
      <div className="cards-wrapper-container">
        {array.map((asset) => (
          <Card
            key={asset.id}
            assetName={asset.name}
            uploadedOn={asset.uploadedOn}
            price={asset.price}
            rating={asset.rating}
            views={asset.views}
            onSelectCard={handleCardSelect}
          />
        ))}
        {/* <RenderOverlay> */}
          {selectedCard && (
            <AssetPreview
              selectedCard={selectedCard}
              setSelectedCard={setSelectedCard}
            />
          )}
        {/* </RenderOverlay> */}
      </div>
    </div>
  );
};

export default CardsContainer;