feat(resource-group-discussion): add discussion topics component

public/api/resource-groups/1/discussion.json

@@ -0,0 +1,25 @@
+{
+  "categoryUri": "https://ask.cyberinfrastructure.org/c/access-forums/access-bridges/78",
+  "topics": [
+    {
+      "topic": "Bridges-2 suitability for computational chemistry workloads (mainly Gaussian)?",
+      "updateDate": "2023-07-26",
+      "topicUri": "https://ask.cyberinfrastructure.org/t/bridges-2-suitability-for-computational-chemistry-workloads-mainly-gaussian/2886"
+    },
+    {
+      "topic": "How do access Bridges2 globus endpoint",
+      "updateDate": "2023-05-26",
+      "topicUri": "https://ask.cyberinfrastructure.org/t/how-do-access-bridges2-globus-endpoint/2769"
+    },
+    {
+      "topic": "AlphaFold 2 Bridges",
+      "updateDate": "2022-09-14",
+      "topicUri": "https://ask.cyberinfrastructure.org/t/alphafold-2-bridges/2493"
+    },
+    {
+      "topic": "About the ACCESS-Bridges category",
+      "updateDate": "2022-08-29",
+      "topicUri": "https://ask.cyberinfrastructure.org/t/about-the-access-bridges-category/2474"
+    }
+  ]
+}

src/resource-group-affinity-group.jsx

@@ -10,13 +10,13 @@ export default function ResourceGroupAffinityGroup({
         Join the community! Members get update about announcements, events, and
         outages.
       </p>
-      <a href="#" class="btn">
+      <a href="#" class="btn secondary">
         Join
       </a>
-      <a href="#" class="btn secondary">
+      <a href="#" class="btn">
         Slack
       </a>
-      <a href="#" class="btn secondary">
+      <a href="#" class="btn">
         Q&A
       </a>
     </Section>

src/resource-group-detail.jsx

@@ -1,5 +1,6 @@
 import ResourceGroupAffinityGroup from "./resource-group-affinity-group";
 import ResourceGroupDescription from "./resource-group-description";
+import ResourceGroupDiscussion from "./resource-group-discussion";
 import ResourceGroupDocumentation from "./resource-group-documentation";
 import ResourceGroupEvents from "./resource-group-events";
 import ResourceGroupProjects from "./resource-group-projects";
@@ -44,6 +45,10 @@ export default function ResourceGroupDetail({ baseUri, resourceGroupId }) {
         baseUri={baseUri}
         resourceGroupId={resourceGroupId}
       />
+      <ResourceGroupDiscussion
+        baseUri={baseUri}
+        resourceGroupId={resourceGroupId}
+      />
     </div>
   );
 }

src/resource-group-discussion.jsx

@@ -0,0 +1,46 @@
+import { useJSON } from "./utils";
+
+import Grid from "./grid";
+import Section from "./section";
+
+export default function ResourceGroupDiscussion({ baseUri, resourceGroupId }) {
+  const data = useJSON(
+    `${baseUri}/api/resource-groups/${resourceGroupId}/discussion.json`,
+    null
+  );
+
+  if (!data || data.error) return;
+
+  const columns = [
+    {
+      key: "topic",
+      name: "Topic",
+      format: (value, row) => <a href={row.topicUri}>{value}</a>,
+    },
+    {
+      key: "updateDate",
+      name: "Last Update",
+      format: (value) =>
+        new Date(value).toLocaleString("en-US", { dateStyle: "medium" }),
+    },
+  ];
+
+  const headerComponents = [
+    <a href={data.categoryUri} class="btn secondary">
+      Ask a Question
+    </a>,
+    <a href={data.categoryUri} class="btn">
+      View All Topics
+    </a>,
+  ];
+
+  return (
+    <Section
+      title="Ask.CI Topics"
+      icon="chat-fill"
+      headerComponents={headerComponents}
+    >
+      <Grid columns={columns} rows={data.topics} />
+    </Section>
+  );
+}

src/section.jsx

@@ -26,7 +26,7 @@ export default function Section({
           {icon ? <Icon name={icon} /> : null}
           {title}
         </h2>
-        {headerComponents}
+        <div>{headerComponents}</div>
       </div>
       {children}
     </section>