make label-grid component for transaction types reference

@theme/components/XRPLCard.tsx

@@ -32,19 +32,46 @@ export function XRPLCard(props: XRPLCardProps) {
     )
 }
 
-export function NavCard(props: {
-  label: string
+export function LabelGrid(props: {
+  category: string
 }) {
   const { usePageSharedData } = useThemeHooks()
   const data = usePageSharedData('index-page-items') as any[]
-  //console.log(data)//TODO:remove
-  const matchingPages = data.filter((page) => {return page.labels?.includes(props.label)})
-  console.log(matchingPages)
+  const matchingPages = data.filter((page) => {return page.category === props.category})
+  const labelsInCategory = []
+  const unlabeled = []
+  for (const page of matchingPages) {
+    if (page.labels) {
+      for (const label of page.labels) {
+        if (!labelsInCategory.includes(label)) {
+          labelsInCategory.push(label)
+        }
+      }
+    } else {
+      unlabeled.push(page)
+    }
+  }
+  labelsInCategory.sort()
   return (
-    <div className="card nav-card">
-      <h3 className="card-title">{props.label}</h3>
+    <div className="card-grid card-grid-2xN">
+      {labelsInCategory.map( (label) => (
+          RawNavCard(label, matchingPages.filter((page) => {return page.labels?.includes(label)})
+        ) )
+      )}
+      { unlabeled.length ? (
+        RawNavCard("Unlabeled", unlabeled)
+      ) : ""}
+    </div>
+  )
+}
+
+
+function RawNavCard(label: string, pages: any[]) {
+  return (
+    <div className="card nav-card" key={label}>
+      <h3 className="card-title">{label}</h3>
       <ul className="nav">
-        {matchingPages?.map((page: any) => (
+        {pages?.map((page: any) => (
           <li className="nav-item" key={page.slug}>
             <Link className="nav-link" to={page.slug}>{
                 page.status === "not_enabled" ? (<>
@@ -52,7 +79,10 @@ export function NavCard(props: {
                   {" "}
                 </>) : ""
               }{page.title}</Link>
-            <p className="blurb child-blurb">{page.seo?.description}</p>
+            {
+              // To add page descriptions to the cards, uncomment:
+              //<p className="blurb child-blurb">{page.seo?.description}</p>
+            }
           </li>
         ))}
       </ul>
@@ -60,6 +90,16 @@ export function NavCard(props: {
   )
 }
 
+export function NavCard(props: {
+  label: string
+}) {
+  const { usePageSharedData } = useThemeHooks()
+  const data = usePageSharedData('index-page-items') as any[]
+  const matchingPages = data.filter((page) => {return page.labels?.includes(props.label)})
+
+  return RawNavCard(props.label, matchingPages)
+}
+
 export function CardGrid(props) {
     const gridClass = `card-grid card-grid-${props.layout}`
     return (

@theme/markdoc/components.tsx

@@ -8,7 +8,7 @@ import { idify } from '../helpers'
 import { Button } from '@redocly/theme/components/Button/Button'
 
 export { default as XRPLoader } from '../components/XRPLoader'
-export { XRPLCard, CardGrid, NavCard } from '../components/XRPLCard'
+export { XRPLCard, CardGrid, NavCard, LabelGrid } from '../components/XRPLCard'
 export { AmendmentsTable, AmendmentDisclaimer, Badge } from '../components/Amendments'
 
 export function IndexPageItems() {

@theme/markdoc/schema.ts

@@ -194,6 +194,18 @@ export const navCard: Schema & { tagName: string } = {
   selfClosing: true
 }
 
+export const labelGrid: Schema & { tagName: string } = {
+  tagName: 'label-grid',
+  attributes: {
+    category: {
+      type: 'String',
+      required: true
+    }
+  },
+  render: 'LabelGrid',
+  selfClosing: true
+}
+
 export const tryIt: Schema &  { tagName: string } = {
   tagName: 'try-it',
   attributes: {

docs/references/protocol/transactions/types/index.md

@@ -16,21 +16,38 @@ All transactions have certain fields in common:
 
 Each transaction type has additional fields relevant to the type of action it causes.
 
+## Payments
+{% label-grid category="Payments" /%}
+
+## Trading
+{% label-grid category="Trading" /%}
+
+## Tokens
+{% label-grid category="Tokens" /%}
+
+## Settings
+{% label-grid category="Settings" /%}
+
+## Other
+{% label-grid category="Other" /%}
+
+<!--
+## Manual card grid below (ignore)
+
 {% card-grid layout="2xN" %}
 {% nav-card label="AMM" /%}
 {% nav-card label="Credentials" /%}
 {% nav-card label="Tokens" /%}
 {% nav-card label="Transaction Sending" /%}
 {% nav-card label="DID" /%}
-{% nav-card label="Escrow" /%}
 {% nav-card label="MPTs" /%}
 {% nav-card label="NFTs" /%}
 {% nav-card label="Decentralized Exchange" /%}
 {% nav-card label="Oracles" /%}
 {% nav-card label="Sidechains" /%}
 {% nav-card label="Permissioned Domains" /%}
-{% nav-card label="Payment Channels" /%}
-{% nav-card label="Checks" /%}
 {% /card-grid %}
 
+## All Transaction Types Alphabetically
 {% child-pages /%}
+-->