added details to card menu popup

package-lock.json

@@ -19,7 +19,9 @@
         "docusaurus-theme-openapi-docs": "^1.5.1",
         "prism-react-renderer": "^1.3.1",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-markdown": "^8.0.7",
+        "react-tabs": "^4.3.0"
       },
       "devDependencies": {
         "@docusaurus/core": "2.2.0",
@@ -11024,8 +11026,9 @@
       "license": "MIT"
     },
     "node_modules/react-markdown": {
-      "version": "8.0.5",
+      "version": "8.0.7",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz",
+      "integrity": "sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==",
       "dependencies": {
         "@types/hast": "^2.0.0",
         "@types/prop-types": "^15.0.0",
@@ -11302,6 +11305,18 @@
         "react": ">=15"
       }
     },
+    "node_modules/react-tabs": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz",
+      "integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==",
+      "dependencies": {
+        "clsx": "^1.1.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0"
+      }
+    },
     "node_modules/react-textarea-autosize": {
       "version": "8.4.0",
       "dev": true,
@@ -21693,7 +21708,9 @@
       "version": "1.0.1"
     },
     "react-markdown": {
-      "version": "8.0.5",
+      "version": "8.0.7",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz",
+      "integrity": "sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==",
       "requires": {
         "@types/hast": "^2.0.0",
         "@types/prop-types": "^15.0.0",
@@ -21858,6 +21875,15 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-tabs": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz",
+      "integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==",
+      "requires": {
+        "clsx": "^1.1.0",
+        "prop-types": "^15.5.0"
+      }
+    },
     "react-textarea-autosize": {
       "version": "8.4.0",
       "dev": true,

package.json

@@ -32,7 +32,9 @@
     "docusaurus-theme-openapi-docs": "^1.5.1",
     "prism-react-renderer": "^1.3.1",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-markdown": "^8.0.7",
+    "react-tabs": "^4.3.0"
   },
   "overrides": {
     "mermaid": "9.1.7"

src/components/marketplace/MarketplaceCard/index.js

@@ -20,7 +20,7 @@ export default function MarketplaceCard({
 }) {
 
   function setFilters(e) {
-    openDialogFunc(rawData);
+    openDialogFunc({"rawData": rawData, "title": title, "image": image});
   }
 
   return (

src/components/marketplace/MarketplaceCardDetail/index.js

@@ -4,14 +4,51 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import ThemedImage from '@theme/ThemedImage';
 import {addDarkToFileName} from '../../../util/util';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import ReactMarkdown from 'react-markdown'
 export default function MarketplaceCardDetail({
   details
 }) {
 
 
+  const getDivText = (data, id) => {
+      const requirementPosition = data.indexOf('id="' + id + '"')
+      const requirementEndPosition = data.indexOf('</div>', requirementPosition)
+      if (requirementPosition > 0 && requirementEndPosition > 0) {
+        return data.substring(requirementPosition + 6 + id.length, requirementEndPosition)
+      } else {
+        return "No requirements found for this marketplace item"
+      }
+      
+  }
+
+
   return (
-    <div onClick={(e) => setFilters(e)}>
+    <div className={styles.detailContainer}>
-      <div>{details}</div>
+      <div className={styles.detailHeader}>
+        <div className={styles.detailTitle}>{details.title}</div>
+        <img className={styles.detailImage} src={useBaseUrl(details.image)}></img>
+      </div>
+      
+      <Tabs className={styles.detailTabs}>
+        <TabList>
+          <Tab>Details</Tab>
+          <Tab>Requirements</Tab>
+          <Tab>Support</Tab>
+        </TabList>
+
+        <TabPanel>
+          <ReactMarkdown className={styles.detailTabContent}>{getDivText(details.rawData, "details")}</ReactMarkdown>
+        </TabPanel>
+        <TabPanel>
+        <ReactMarkdown className={styles.detailTabContent}>{getDivText(details.rawData, "requirements")}</ReactMarkdown>
+        </TabPanel>
+        <TabPanel>
+        <ReactMarkdown className={styles.detailTabContent}>{getDivText(details.rawData, "support")}</ReactMarkdown>
+        </TabPanel>
+      </Tabs>
+
     </div>
   );
 }

src/components/marketplace/MarketplaceCardDetail/styles.module.css

@@ -1,127 +1,30 @@
-/* Getting Started Card */
+.detailContainer {
-.card {
+  max-width: 800px;
-  position: relative;
+}
-  margin-top: 20px;
+
-  height: 650px;
+.detailHeader {
-  /* UI Properties */
+  display: flex;
-  background: var(--dev-card-background);
+  margin: 20px;
-  box-shadow: var(--dev-card-shadow);
+}
-  border: 1px solid var(--dev-card-background);
+
+.detailImage {
   border-radius: 40px;
-  opacity: 1;
+  max-width: 400px;
-  transition: all  0.3s;
+  min-width: 180px;
-  max-width: 600px;
 }
 
-.card:hover {
+.detailTitle {
-  cursor: pointer;
+  margin: 45px;
-  transform: translate(0px, -5px);
+  font-size: 48px;
-  box-shadow: var(--dev-card-selected);
-}
-
-
-
-
-
-.cardText {
-  position: absolute;
-  margin: 22px;
-  min-width: 170px;
-  top: 10px;
-  left: 0;
-}
-
-
-.cardTitle {
-  font-size: 22px;
-  font-weight: 700;
-}
-
-.cardBody {
-  font-size: 16px;
-  font-weight: 500;
-  top: 10px;
-  left: 0;
-}
-
-.tag {
-  font-size: 16px;
   font-weight: 500;
   color: var(--dev-secondary-text);
-  background-color: var(--dev-tag-highlight);
+  text-shadow: rgba(17, 61, 158, 0.64) 1px 2px 2px;
-  padding: 0px 8px;
-  margin-left: 5px;
-  margin-top: 5px;
 }
 
-.tags {
+.detailTabContent {
-  margin: 0px;
+  margin: 20px;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-
-
-
-
-.cardUser {
-  position: absolute;
-  bottom: 10px;
-  left: 25px;
-  display: flex;
-}
-
-.cardFace {
-  border-radius: 9999px;
-  margin: auto;
-  height: 40px;
-  width: 40px;
-}
-
-.cardName {
-  min-width: 170px;
-  margin-top: 7px;
-  margin-left: 10px;
-}
-
-
-
-
-
-.cardData {
-  position: absolute;
-  bottom: 50px;
-  left: 20px;
-  display: flex;
-  align-items: center;
-}
-
-.cardEye {
-  fill: #96a9bb;
-  /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
-  filter: invert(79%) sepia(12%) saturate(484%) hue-rotate(168deg) brightness(84%) contrast(84%);
-  margin-left: 5px;
-  height: 18px;
-  width: 18px;
-}
-
-.cardComment {
-  margin-left: 10px;
-  fill: #96a9bb;
-  /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
-  filter: invert(79%) sepia(12%) saturate(484%) hue-rotate(168deg) brightness(84%) contrast(84%);
-  height: 18px;
-  width: 18px;
-  margin-bottom: 4px;
-}
-
-.cardCommentText {
-  color: #96a9ba;
-  /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
-  margin-left: 5px;
-  margin-bottom: 5px;
-  height: 20px;
-  font-size: 16px;
 }
 
+.detailTabs {
+  margin: 10px;
+}

src/components/marketplace/MarketplaceCards/index.js

@@ -63,7 +63,6 @@ export default function BlogCards({
         className={styles.modal}
         contentLabel="Details">
         <div>
-          Modal Works!
           <MarketplaceCardDetail details={details}></MarketplaceCardDetail>
         </div>
         <button

src/components/marketplace/MarketplaceCards/styles.module.css

@@ -31,7 +31,6 @@
 
 .modal {
   position: absolute;
-  margin-top: 50px;
   top: 50%;
   left: 50%;
   right: auto;
@@ -42,6 +41,10 @@
   border-radius: 20px;
   background-color: var(--dev-card-background);
   max-height: 100%;
+  max-width: 90%;
+  min-height: 80%;
+  scroll-behavior: auto;
+  overflow-y: auto;
 }
 
 .modalButton {