updated market place ui

app/src/modules/market/Card.tsx

@@ -1,3 +1,4 @@
+// Card.tsx
 import React from "react";
 import {
   CommentsIcon,
@@ -8,24 +9,51 @@ import {
 } from "../../components/icons/marketPlaceIcons";
 
 import assetImage from "../../assets/image/image.png";
-const Card: React.FC = () => {
+
+interface CardProps {
+  assetName: string;
+  uploadedOn: string;
+  price: number;
+  rating: number;
+  views: number;
+  onSelectCard: (cardData: {
+    assetName: string;
+    uploadedOn: string;
+    price: number;
+    rating: number;
+    views: number;
+  }) => void;
+}
+
+const Card: React.FC<CardProps> = ({
+  assetName,
+  uploadedOn,
+  price,
+  rating,
+  views,
+  onSelectCard,
+}) => {
+  const handleCardSelect = () => {
+    onSelectCard({ assetName, uploadedOn, price, rating, views });
+  };
+
   return (
     <div className="card-container">
       <div className="icon">
         <DownloadIcon />
       </div>
       <div className="image-container">
-        <img src={assetImage} alt="" />
+        <img src={assetImage} alt={assetName} />
       </div>
       <div className="assets-container">
         <div className="name-container">
-          <div className="asstes-container">Asset name</div>
-          <div className="assets-date">Uploaded on-12 Jan 23</div>
+          <div className="assets-name">{assetName}</div>
+          <div className="assets-date">{uploadedOn}</div>
         </div>
         <div className="details">
           <div className="content">
             <EyeIconBig />
-            1.5k
+            {views}
           </div>
           <div className="content">
             <CommentsIcon />
@@ -39,17 +67,17 @@ const Card: React.FC = () => {
       </div>
       <div className="stars-container">
         <div className="stars-wrapper">
-          <StarsIconSmall />
-          <StarsIconSmall />
-          <StarsIconSmall />
-          <StarsIconSmall />
-          <StarsIconSmall />
+          {[...Array(5)].map((_, index) => (
+            <StarsIconSmall key={index} />
+          ))}
         </div>
         <div className="units">
-          ₹ 36,500/<span>unit</span>
+          ₹ {price}/<span>unit</span>
         </div>
       </div>
-      <div className="buy-now-button">Buy now</div>
+      <div className="buy-now-button" onClick={handleCardSelect}>
+        Buy now
+      </div>
     </div>
   );
 };