Merge branch 'realTimeVisulization' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into realTimeVisulization

app/src/modules/market/Card.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import {
+  CommentsIcon,
+  DownloadIcon,
+  EyeIconBig,
+  StarsIconSmall,
+  VerifiedIcon,
+} from "../../components/icons/marketPlaceIcons";
+
+import assetImage from "../../assets/image/image.png";
+const Card: React.FC = () => {
+  return (
+    <div className="card-container">
+      <div className="icon">
+        <DownloadIcon />
+      </div>
+      <div className="image-container">
+        <img src={assetImage} alt="" />
+      </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>
+        <div className="details">
+          <div className="content">
+            <EyeIconBig />
+            1.5k
+          </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">
+          <StarsIconSmall />
+          <StarsIconSmall />
+          <StarsIconSmall />
+          <StarsIconSmall />
+          <StarsIconSmall />
+        </div>
+        <div className="units">
+          ₹ 36,500/<span>unit</span>
+        </div>
+      </div>
+      <div className="buy-now-button">Buy now</div>
+    </div>
+  );
+};
+
+export default Card;

app/src/modules/market/CardsContainer.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Card from "./Card";
+
+const CardsContainer: React.FC = () => {
+  const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+  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} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CardsContainer;

app/src/modules/market/FilterSearch.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+// import RegularDropDown from "./ui/inputs/RegularDropDown";
+
+import Search from "../../components/ui/inputs/Search";
+import { StarsIcon } from "../../components/icons/marketPlaceIcons";
+import RegularDropDown from "../../components/ui/inputs/RegularDropDown";
+
+const FilterSearch: React.FC = () => {
+  const [activeOption, setActiveOption] = useState("Sort by"); // State for active option
+
+  const handleSelect = (option: string) => {
+    setActiveOption(option);
+  };
+  return (
+    <div className="filter-search-container">
+      <Search onChange={() => {}} />
+      <RegularDropDown
+        header={activeOption}
+        options={["Alphabet ascending", "Alphabet descending", ""]}
+        onSelect={handleSelect}
+        search={false}
+      />
+      <div className="button">Free</div>
+      <div className="button">Animated</div>
+      <div className="rating-container">
+        <div className="label">Rating</div>
+        <div className="stars">
+          <StarsIcon />
+          <StarsIcon />
+          <StarsIcon />
+          <StarsIcon />
+          <StarsIcon />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilterSearch;

app/src/modules/market/MarketPlace.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import FilterSearch from "./FilterSearch";
+import CardsContainer from "./CardsContainer";
+
+const MarketPlace = () => {
+  return (
+    <div className="marketplace-wrapper">
+      <div className="marketplace-container">
+        <div className="marketPlace">
+          <FilterSearch />
+          <CardsContainer />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MarketPlace;