Merge pull request #87 from adastackio/os_builders

Add new Wallet page, and convert ecosystem directories to table
adastackio · Jan 6, 2025 · f76c5e5 · f76c5e5 · vercel · Jan 6, 2025
2 parents f443141 + e7a6ec3
commit f76c5e5
Show file tree

Hide file tree

Showing 15 changed files with 1,986 additions and 1,329 deletions.
diff --git a/components/badges/GithubRepoBadge.tsx b/components/badges/GithubRepoBadge.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Button } from "antd";
+import { SingleCommitIcon } from "../../assets/icons";
+
+interface GithubRepoBadgeProps {
+  repoURL: string;
+  text?: string; // Optional text prop with default value
+}
+
+const GithubRepoBadge: React.FC<GithubRepoBadgeProps> = React.memo(
+  ({ repoURL, text = "Team" }) => {
+    if (!repoURL) {
+      return null;
+    }
+
+    return (
+      <a href={repoURL} target="_blank" rel="noopener noreferrer">
+        <div className="badge-container github-repo-badge-container inline-flex items-center">
+          <Button
+            icon={<SingleCommitIcon />}
+            className="badge-button github-repo-badge-content"
+          >
+            {text}
+          </Button>
+        </div>
+      </a>
+    );
+  }
+);
+
+// Assign display name to the memoized component
+GithubRepoBadge.displayName = "GithubRepoBadge";
+
+export default GithubRepoBadge;
diff --git a/components/badges/TeamGithubBadge.tsx b/components/badges/TeamGithubBadge.tsx
@@ -4,13 +4,12 @@ import { GithubIcon } from "../../assets/icons";
 
 interface TeamGithubBadgeProps {
   teamGithubURL: string;
-  error: string | null;
-  text?: string; // Optional text prop with default value
+  text?: string;
 }
 
 const TeamGithubBadge: React.FC<TeamGithubBadgeProps> = React.memo(
-  ({ teamGithubURL, error, text = "Team" }) => {
-    if (!teamGithubURL || error) {
+  ({ teamGithubURL, text = "Team" }) => {
+    if (!teamGithubURL) {
       return null;
     }
 

diff --git a/components/tables/DirectoryTable.tsx b/components/tables/DirectoryTable.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import TeamGithubBadge from "@components/badges/TeamGithubBadge";
+import GithubRepoBadge from "@components/badges/GithubRepoBadge";
+import Favicon from "@components/badges/Favicon";
+
+interface Project {
+  name: string;
+  website: string;
+  teamGithubURL?: string;
+  sourceRepoURL?: string;
+  description?: string;
+}
+
+interface DirectoryTableProps {
+  projects: Project[];
+}
+
+const DirectoryTable: React.FC<DirectoryTableProps> = ({ projects = [] }) => {
+  // Sort projects by open source status
+  const sortedProjects = projects.sort((a, b) => {
+    if (a.sourceRepoURL && !b.sourceRepoURL) return -1;
+    if (!a.sourceRepoURL && b.sourceRepoURL) return 1;
+    if (a.teamGithubURL && !b.teamGithubURL) return -1;
+    if (!a.teamGithubURL && b.teamGithubURL) return 1;
+    return 0;
+  });
+
+  return (
+    <div className="data-table-wrapper">
+      <table className="data-table directory-table">
+        <tbody>
+          {sortedProjects.map((project, index) => (
+            <tr
+              key={index}
+              className="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"
+            >
+              <td className="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600 table-cell first-column-cell">
+                <div className="flex items-center justify-between w-full">
+                  <span className="flex items-center">
+                    <Favicon url={project.website} />
+                    &nbsp;
+                    <a href={project.website}>
+                      <span className="team_table_name_container">
+                        {project.name}
+                      </span>
+                    </a>
+                  </span>
+                </div>
+              </td>
+              <td className="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600 table-cell">
+                {project.teamGithubURL ? (
+                  <TeamGithubBadge
+                    teamGithubURL={project.teamGithubURL}
+                    text="Team"
+                  />
+                ) : (
+                  ""
+                )}
+              </td>
+              <td className="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600 table-cell">
+                {project.sourceRepoURL ? (
+                  <GithubRepoBadge
+                    repoURL={project.sourceRepoURL}
+                    text="Source Code"
+                  />
+                ) : (
+                  ""
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default DirectoryTable;
diff --git a/components/tables/OpenSourceBuildersTable.jsx b/components/tables/OpenSourceBuildersTable.jsx
@@ -254,7 +254,6 @@ const OpenSourceBuildersTable = ({ data }) => {
                 <TeamGithubBadge
                   teamGithubURL={teamGithubURL}
                   text="Team"
-                  error={record.error}
                 />
               </span>
             </TeamGithubTooltip>

diff --git a/components/tables/WalletsTable.tsx b/components/tables/WalletsTable.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import TeamGithubBadge from "@components/badges/TeamGithubBadge";
+import GithubRepoBadge from "@components/badges/GithubRepoBadge";
+import Favicon from "@components/badges/Favicon";
+
+interface Wallet {
+  name: string;
+  website: string;
+  teamGithubURL: string;
+  sourceRepoURL: string;
+  tags: string[];
+}
+
+interface WalletsTableProps {
+  wallets: Wallet[];
+  filterBy?: string;
+}
+
+const WalletsTable: React.FC<WalletsTableProps> = ({ wallets, filterBy }) => {
+  const filteredWallets = filterBy
+    ? wallets.filter((wallet) => wallet.tags.includes(filterBy))
+    : wallets;
+
+  // Sort wallets by open source status
+  const sortedWallets = filteredWallets.sort((a, b) => {
+    if (a.sourceRepoURL && !b.sourceRepoURL) return -1;
+    if (!a.sourceRepoURL && b.sourceRepoURL) return 1;
+    if (a.teamGithubURL && !b.teamGithubURL) return -1;
+    if (!a.teamGithubURL && b.teamGithubURL) return 1;
+    return 0;
+  });
+
+  return (
+    <div className="data-table-wrapper">
+      <table className="data-table wallet-table">
+        <thead>
+          <tr>
+            <th></th>
+            <th></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {sortedWallets.map((wallet, index) => (
+            <tr
+              key={index}
+              className="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"
+            >
+              <td className="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600 table-cell first-column-cell">
+                <div className="flex items-center justify-between w-full">
+                  <span className="flex items-center">
+                    <Favicon url={wallet.website} />
+                    &nbsp;
+                    <a href={wallet.website}>
+                      <span className="team_table_name_container">
+                        {wallet.name}
+                      </span>
+                    </a>
+                  </span>
+                </div>
+              </td>
+              <td className="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600 table-cell">
+                <TeamGithubBadge
+                  teamGithubURL={wallet.teamGithubURL}
+                  text="Team"
+                />
+              </td>
+              <td className="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600 table-cell">
+                <GithubRepoBadge
+                  repoURL={wallet.sourceRepoURL}
+                  text="Source Code"
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default WalletsTable;
diff --git a/css/styles.css b/css/styles.css
@@ -618,6 +618,15 @@ a.nextra-card:hover {
   cursor: pointer;
 }
 
+html[style*="color-scheme: dark;"] td a {
+  color: #e2e8f0;
+}
+
+.badge-button.github-repo-badge-content {
+  padding-left: 5px;
+  gap: 3px;
+}
+
 a.nextra-card .nextra-card-title {
   font-size: 20px;
   padding-left: 30px;
@@ -751,6 +760,11 @@ table .favicon-custom-css {
   fill: #538bde;
 }
 
+/* Hide all pages from sidebar that aren't live yet. Remove the .page-in-development declarations once all pages are live */
+li.nx-flex.nx-flex-col.nx-gap-1:has(a div.page-in-development) {
+  display: none;
+}
+
 .page-in-development {
   opacity: 0.5;
   color: #888;
@@ -810,6 +824,29 @@ a[class*="nx-cursor-pointer"]:hover .page-in-development::after {
   max-width: none;
 }
 
+/* Tailwind data-table */
+.data-table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  max-width: 100vw;
+  white-space: nowrap;
+}
+
+.data-table-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.data-table .table-cell {
+  height: 50px;
+}
+
+.data-table.wallet-table .first-column-cell {
+  width: 300px;
+}
+.data-table.directory-table .first-column-cell {
+  width: 300px;
+}
+
 /* Ant Design Modifications */
 html body .ant-table-cell div a {
   width: auto !important;
@@ -966,7 +1003,7 @@ html[style*="color-scheme: dark;"] .table-row-even {
 }
 
 html[style*="color-scheme: dark;"] .team_table_name {
-  color: #c8c8c8;
+  color: #e2e8f0;
 }
 
 html[style*="color-scheme: dark;"] .team_table_name:hover {

diff --git a/data/directories.json b/data/directories.json
@@ -0,0 +1,58 @@
+[
+  {
+    "name": "CardanoCube",
+    "website": "https://www.cardanocube.com/cardano-ecosystem-interactive-map",
+    "teamGithubURL": "",
+    "sourceRepoURL": "",
+    "description": "Large collection of Cardano projects"
+  },
+  {
+    "name": "Built on Cardano",
+    "website": "https://builtoncardano.com",
+    "teamGithubURL": "",
+    "sourceRepoURL": "",
+    "description": "Organized map of Cardano projects"
+  },
+  {
+    "name": "CardanoSpot Library",
+    "website": "https://cardanospot.io/project-library/all",
+    "teamGithubURL": "https://github.com/emurgo",
+    "sourceRepoURL": "",
+    "description": "Library of dApps building on Cardano"
+  },
+  {
+    "name": "Cardano.org Showcase",
+    "website": "https://developers.cardano.org/showcase",
+    "teamGithubURL": "https://github.com/cardano-foundation",
+    "sourceRepoURL": "https://github.com/cardano-foundation/developer-portal",
+    "description": "Collection of projects building on Cardano"
+  },
+  {
+    "name": "Dapps on Cardano",
+    "website": "https://dappsoncardano.com",
+    "teamGithubURL": "https://github.com/Cardano-Fans",
+    "sourceRepoURL": "",
+    "description": "Ranking stats for dApps, and links to code audits"
+  },
+  {
+    "name": "CardanoDegen Resource Directory",
+    "website": "https://cardanodegen.shop/cardano-links",
+    "teamGithubURL": "https://github.com/ensured",
+    "sourceRepoURL": "https://github.com/ensured/cardano-degen-club",
+    "description": "Simple links to ecosystem essentials"
+  },
+  {
+    "name": "dSociety Real World Projects",
+    "website": "https://dsociety.io/least-harmful",
+    "teamGithubURL": "https://github.com/selfdriven-foundation",
+    "sourceRepoURL": "",
+    "description": "Projects working towards a least-harmful society using economic identity"
+  },
+  {
+    "name": "CardanoLink.net",
+    "website": "https://www.cardanolink.net/Cardanolink/Eng.html",
+    "teamGithubURL": "https://github.com/NotMick3",
+    "sourceRepoURL": "https://github.com/NotMick3/CardanoLink-raw-data",
+    "description": "Links to dApps, Games, dev tools, and much more"
+  }
+]