From 364fda294c38f305683abc1ae80e83a97d06d1c9 Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Wed, 26 Mar 2025 16:21:35 +0530
Subject: [PATCH] updated market place ui

---
 app/src/components/icons/marketPlaceIcons.tsx |  21 ++
 app/src/components/ui/inputs/Search.tsx       |   2 +-
 app/src/modules/market/AssetPreview.tsx       |  95 ++++++++
 app/src/modules/market/Card.tsx               |  52 ++++-
 app/src/modules/market/CardsContainer.tsx     | 144 +++++++++++-
 app/src/modules/market/FilterSearch.tsx       |   2 +-
 .../components/marketPlace/marketPlace.scss   | 205 +++++++++++++++++-
 package-lock.json                             |   6 -
 8 files changed, 497 insertions(+), 30 deletions(-)
 create mode 100644 app/src/modules/market/AssetPreview.tsx
 delete mode 100644 package-lock.json

diff --git a/app/src/components/icons/marketPlaceIcons.tsx b/app/src/components/icons/marketPlaceIcons.tsx
index 9aa8619..76dedd3 100644
--- a/app/src/components/icons/marketPlaceIcons.tsx
+++ b/app/src/components/icons/marketPlaceIcons.tsx
@@ -130,3 +130,24 @@ export function StarsIconSmall() {
     </svg>
   );
 }
+
+export function FiileedStarsIconSmall() {
+  return (
+    <svg
+      width="11"
+      height="12"
+      viewBox="0 0 11 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.07372 1.61354C5.20877 1.31056 5.27632 1.15908 5.37035 1.11243C5.45202 1.0719 5.54791 1.0719 5.62958 1.11243C5.72362 1.15908 5.79117 1.31056 5.92621 1.61354L7.00187 4.02675C7.04183 4.11631 7.06178 4.16109 7.0927 4.19539C7.12 4.22573 7.15342 4.25 7.1907 4.26662C7.23287 4.2854 7.28164 4.29055 7.37917 4.30084L10.0067 4.57816C10.3366 4.61297 10.5015 4.63038 10.5749 4.70539C10.6387 4.77054 10.6683 4.86177 10.655 4.95198C10.6397 5.05581 10.5165 5.16682 10.2701 5.3889L8.30737 7.15768C8.23457 7.22331 8.19811 7.25615 8.17507 7.29611C8.15466 7.33152 8.14188 7.37077 8.13762 7.41137C8.13278 7.45728 8.14293 7.50523 8.16329 7.60119L8.71151 10.1858C8.78034 10.5103 8.81476 10.6725 8.76611 10.7655C8.72381 10.8463 8.64623 10.9027 8.55634 10.9179C8.45286 10.9354 8.30918 10.8526 8.02183 10.6868L5.73312 9.36677C5.64819 9.31777 5.60572 9.29332 5.56057 9.2837C5.52062 9.27524 5.47931 9.27524 5.43936 9.2837C5.39421 9.29332 5.35174 9.31777 5.26681 9.36677L2.97811 10.6868C2.69077 10.8526 2.5471 10.9354 2.44361 10.9179C2.35372 10.9027 2.27611 10.8463 2.23385 10.7655C2.18521 10.6725 2.21962 10.5103 2.28845 10.1858L2.83664 7.60119C2.85699 7.50523 2.86716 7.45728 2.86233 7.41137C2.85805 7.37077 2.8453 7.33152 2.82488 7.29611C2.80181 7.25615 2.76539 7.22331 2.69254 7.15768L0.72985 5.3889C0.483444 5.16682 0.360238 5.05581 0.34492 4.95198C0.33162 4.86177 0.361259 4.77054 0.425041 4.70539C0.498471 4.63038 0.663408 4.61297 0.993283 4.57816L3.62079 4.30084C3.71831 4.29055 3.76706 4.2854 3.80923 4.26662C3.84653 4.25 3.87993 4.22573 3.90727 4.19539C3.93815 4.16109 3.95812 4.11631 3.99804 4.02675L5.07372 1.61354Z"
+        fill="#F3A50C"
+        stroke="#F3A50C"
+        stroke-width="0.7"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/app/src/components/ui/inputs/Search.tsx b/app/src/components/ui/inputs/Search.tsx
index fa9d28c..b6e1f19 100644
--- a/app/src/components/ui/inputs/Search.tsx
+++ b/app/src/components/ui/inputs/Search.tsx
@@ -36,7 +36,7 @@ const Search: React.FC<SearchProps> = ({
   };
 
   return (
-    <div className="search-wrapper">
+    <div className="asset-search-wrapper">
       <div
         className={`search-container ${
           isFocused || inputValue ? "active" : ""
diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx
new file mode 100644
index 0000000..a3c1cb0
--- /dev/null
+++ b/app/src/modules/market/AssetPreview.tsx
@@ -0,0 +1,95 @@
+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;
diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx
index 3df2e1f..d0596a5 100644
--- a/app/src/modules/market/Card.tsx
+++ b/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>
   );
 };
diff --git a/app/src/modules/market/CardsContainer.tsx b/app/src/modules/market/CardsContainer.tsx
index 204ef6d..96a47e4 100644
--- a/app/src/modules/market/CardsContainer.tsx
+++ b/app/src/modules/market/CardsContainer.tsx
@@ -1,18 +1,152 @@
-import React from "react";
+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 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+  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((index) => (
-          <Card key={index} />
+        {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;
\ No newline at end of file
+export default CardsContainer;
diff --git a/app/src/modules/market/FilterSearch.tsx b/app/src/modules/market/FilterSearch.tsx
index 11a2cbf..6750635 100644
--- a/app/src/modules/market/FilterSearch.tsx
+++ b/app/src/modules/market/FilterSearch.tsx
@@ -16,7 +16,7 @@ const FilterSearch: React.FC = () => {
       <Search onChange={() => {}} />
       <RegularDropDown
         header={activeOption}
-        options={["Alphabet ascending", "Alphabet descending", ""]}
+        options={["Alphabet ascending", "Alphabet descending"]}
         onSelect={handleSelect}
         search={false}
       />
diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss
index 3d2f647..9b2d18a 100644
--- a/app/src/styles/components/marketPlace/marketPlace.scss
+++ b/app/src/styles/components/marketPlace/marketPlace.scss
@@ -8,14 +8,18 @@
     background-color: var(--background-color-secondary);
     position: absolute;
     left: 0;
-    padding: 100px 50px;
+    padding: 95px 8px;
+    padding-bottom: 32px;
 
     .marketplace-container {
         padding: 20px 2px;
-        height: calc(100vh - 120px);
+        // height: calc(100vh - 120px);
+        height: 100%;
         background-color: var(--background-color);
         box-shadow: #{$box-shadow-medium};
         border-radius: #{$border-radius-extra-large};
+        position: relative;
+
     }
 
     .marketPlace {
@@ -34,18 +38,23 @@
             width: 100%;
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 20px;
 
-            .search-wrapper {
+            .asset-search-wrapper {
                 min-width: 60%;
                 max-width: 684px;
                 padding: 0;
                 border-radius: $border-radius-large ;
 
                 .search-container {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
                     border: none !important;
                     box-shadow: $box-shadow-medium;
-                    border-radius: $border-radius-large ;
+                    border-radius: $border-radius-large;
+                    overflow: hidden;
+                    padding: 4px 12px;
 
                     input {
                         border: none !important;
@@ -57,12 +66,18 @@
 
             .regularDropdown-container {
                 max-width: 159px;
+                height: 100%;
+
+                .dropdown-header {
+                    align-items: center;
+                }
             }
 
             .button {
                 padding: 5px 20px;
                 border: 1px solid var(--accent-color);
                 border-radius: 14px;
+                color: var(--accent-color);
             }
 
             .rating-container {
@@ -88,6 +103,7 @@
                 color: var(--text-color);
                 font-weight: $medium-weight;
                 font-size: $xlarge;
+                margin: 10px 0;
             }
 
             .cards-wrapper-container {
@@ -116,6 +132,7 @@
                         border-radius: 10px;
                         padding: 5px;
                         background-color: var(--accent-color);
+                        cursor: pointer;
                     }
 
                     .image-container {
@@ -184,4 +201,182 @@
             }
         }
     }
+}
+
+.assetPreview-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .assetPreview {
+        width: 100%;
+        height: 100%;
+        background-color: var(--background-color);
+        display: flex;
+        gap: 12px;
+        z-index: 100;
+        border-radius: 20px;
+    }
+
+    // Image Preview Section
+    .image-preview {
+        width: 50%;
+        height: 100%;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    }
+
+    // Asset Details Section
+    .asset-details-preview {
+        width: 50%;
+        padding: 50px 20px;
+        overflow-y: auto;
+
+    }
+
+    // Organization Section (Top part with image and details)
+    .organization {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        gap: 10px;
+
+        .image {
+            @include flex-center;
+            height: 30px;
+            width: 30px;
+            min-height: 26px;
+            min-width: 26px;
+            border-radius: 50%;
+            font-weight: var(--font-weight-bold);
+            color: var(--background-color);
+            background-color: var(--accent-color);
+        }
+
+        .organization-details {
+            display: flex;
+            flex-direction: column;
+
+            .organization-name {
+                font-weight: bold;
+                margin-bottom: 5px;
+
+                font-weight: #{$bold-weight};
+                font-size: $regular ;
+            }
+
+            .follow {
+                color: var(--accent-color);
+                cursor: pointer;
+            }
+        }
+    }
+
+    // Asset Details
+    .asset-details {
+        margin-top: 20px;
+
+        .asset-name {
+            font-size: 1.5em;
+            font-weight: bold;
+            margin-bottom: 10px;
+            font-weight: #{$bold-weight};
+            font-size: $large;
+        }
+
+        .asset-description {
+            margin-bottom: 20px;
+            color: #666;
+        }
+
+        .asset-review {
+            width: fit-content;
+            padding: 5px 10px;
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            outline: 1px solid #909090CC;
+            border-radius: 6px;
+
+            .asset-rating {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                margin-right: 10px;
+                font-weight: bold;
+                position: relative;
+
+                font-weight: #{$bold-weight};
+                font-size: $regular ;
+
+                &::after {
+                    margin-left: 5px;
+                    content: "";
+                    display: block;
+                    width: 2px;
+                    height: 12px;
+                    background-color: #ccc;
+
+
+                }
+            }
+
+            .asset-view {
+
+                font-weight: #{$bold-weight};
+                font-size: $regular ;
+            }
+        }
+
+        .asset-price {
+            font-size: $xxlarge;
+            font-weight: bold;
+            margin-bottom: 20px;
+        }
+    }
+
+    // Button Container and Button Styles
+    .button-container {
+        display: flex;
+        gap: 10px;
+    }
+
+    .button {
+
+
+        color: white;
+        padding: 10px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+        text-align: center;
+
+        &:first-child {
+            outline: 1px solid var(--accent-color);
+            color: var(--accent-color);
+        }
+
+        &:last-child {
+            background-color: var(--accent-color);
+            color: var(--background-color);
+        }
+
+
+
+    }
+
+    .closeButton {
+        color: var(--accent-color);
+        position: absolute;
+        top: 18px;
+        left: 18px;
+        @include flex-center;
+        cursor: pointer;
+        font-size: var(--font-size-large);
+    }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 5ef6c4e..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "Dwinzo_dev",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}