Add label-based nav card

@theme/components/XRPLCard.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
-import dynamicReact from '@markdoc/markdoc/dist/react';
-import { Link } from '@redocly/theme/components/Link/Link';
+import dynamicReact from '@markdoc/markdoc/dist/react'
+import { useThemeHooks } from '@redocly/theme/core/hooks'
+import { Link } from '@redocly/theme/components/Link/Link'
+import { NotEnabled } from '@theme/markdoc/components';
 
 export interface XRPLCardProps {
     title: string,
@@ -30,6 +32,34 @@ export function XRPLCard(props: XRPLCardProps) {
     )
 }
 
+export function NavCard(props: {
+  label: 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)
+  return (
+    <div className="card nav-card">
+      <h3 className="card-title">{props.label}</h3>
+      <ul className="nav">
+        {matchingPages?.map((page: any) => (
+          <li className="nav-item" key={page.slug}>
+            <Link className="nav-link" to={page.slug}>{
+                page.status === "not_enabled" ? (<>
+                  <NotEnabled />
+                  {" "}
+                </>) : ""
+              }{page.title}</Link>
+            <p className="blurb child-blurb">{page.seo?.description}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
 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 } from '../components/XRPLCard'
+export { XRPLCard, CardGrid, NavCard } from '../components/XRPLCard'
 export { AmendmentsTable, AmendmentDisclaimer, Badge } from '../components/Amendments'
 
 export function IndexPageItems() {
@@ -140,7 +140,7 @@ export function TxExample(props: {
   } else if (props.server == 'testnet') {
     use_server = "&server=wss%3A%2F%2Fs.altnet.rippletest.net%3A51233%2F"
   }
-  
+
   const ws_req = `req=%7B%22id%22%3A%22example_tx_lookup%22%2C%22command%22%3A%22tx%22%2C%22transaction%22%3A%22${props.txid}%22%2C%22binary%22%3Afalse%2C%22api_version%22%3A2%7D`
   const to_path = `/resources/dev-tools/websocket-api-tool?${ws_req}${use_server}`
   return (

@theme/markdoc/schema.ts

@@ -182,6 +182,18 @@ export const cardGrid: Schema & { tagName: string } = {
   render: 'CardGrid'
 }
 
+export const navCard: Schema & { tagName: string } = {
+  tagName: 'nav-card',
+  attributes: {
+    label: {
+      type: 'String',
+      required: true
+    }
+  },
+  render: 'NavCard',
+  selfClosing: true
+}
+
 export const tryIt: Schema &  { tagName: string } = {
   tagName: 'try-it',
   attributes: {