diff --git a/package-lock.json b/package-lock.json index 1ab33f327..bcc54b194 100644 --- a/package-lock.json +++ b/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", - "license": "MIT", + "version": "8.0.7", + "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, diff --git a/package.json b/package.json index d4a608686..68a28421d 100644 --- a/package.json +++ b/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" diff --git a/src/components/marketplace/MarketplaceCard/index.js b/src/components/marketplace/MarketplaceCard/index.js index f1961e750..a07d0a13c 100644 --- a/src/components/marketplace/MarketplaceCard/index.js +++ b/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 ( diff --git a/src/components/marketplace/MarketplaceCardDetail/index.js b/src/components/marketplace/MarketplaceCardDetail/index.js index e75f2a6e5..dcbe7df4e 100644 --- a/src/components/marketplace/MarketplaceCardDetail/index.js +++ b/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('', requirementPosition) + if (requirementPosition > 0 && requirementEndPosition > 0) { + return data.substring(requirementPosition + 6 + id.length, requirementEndPosition) + } else { + return "No requirements found for this marketplace item" + } + + } + + return ( -
setFilters(e)}> -
{details}
+
+
+
{details.title}
+ +
+ + + + Details + Requirements + Support + + + + {getDivText(details.rawData, "details")} + + + {getDivText(details.rawData, "requirements")} + + + {getDivText(details.rawData, "support")} + + +
); } diff --git a/src/components/marketplace/MarketplaceCardDetail/styles.module.css b/src/components/marketplace/MarketplaceCardDetail/styles.module.css index 19eaa3be2..0e8644ef6 100644 --- a/src/components/marketplace/MarketplaceCardDetail/styles.module.css +++ b/src/components/marketplace/MarketplaceCardDetail/styles.module.css @@ -1,127 +1,30 @@ -/* Getting Started Card */ -.card { - position: relative; - margin-top: 20px; - height: 650px; - /* UI Properties */ - background: var(--dev-card-background); - box-shadow: var(--dev-card-shadow); - border: 1px solid var(--dev-card-background); +.detailContainer { + max-width: 800px; +} + +.detailHeader { + display: flex; + margin: 20px; +} + +.detailImage { border-radius: 40px; - opacity: 1; - transition: all 0.3s; - max-width: 600px; + max-width: 400px; + min-width: 180px; } -.card:hover { - cursor: pointer; - transform: translate(0px, -5px); - 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; +.detailTitle { + margin: 45px; + font-size: 48px; font-weight: 500; color: var(--dev-secondary-text); - background-color: var(--dev-tag-highlight); - padding: 0px 8px; - margin-left: 5px; - margin-top: 5px; + text-shadow: rgba(17, 61, 158, 0.64) 1px 2px 2px; } -.tags { - margin: 0px; - 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; +.detailTabContent { + margin: 20px; } +.detailTabs { + margin: 10px; +} \ No newline at end of file diff --git a/src/components/marketplace/MarketplaceCards/index.js b/src/components/marketplace/MarketplaceCards/index.js index 2ec3bebff..bd4e747fb 100644 --- a/src/components/marketplace/MarketplaceCards/index.js +++ b/src/components/marketplace/MarketplaceCards/index.js @@ -63,7 +63,6 @@ export default function BlogCards({ className={styles.modal} contentLabel="Details">
- Modal Works!