Supply MDX rendering components via a DRY approach

demo_assets/component_demo.tsx

@@ -7,19 +7,19 @@ import {
   TableRow,
 } from '@mui/material';
 
-interface DemoComponentProps {
+interface DemoRobotTableProps {
   name: string;
   description: string;
   image: string;
   features: string[];
 }
 
-export default function DemoComponent({
+export default function DemoRobotTable({
   name,
   description,
   image,
   features,
-}: DemoComponentProps) {
+}: DemoRobotTableProps) {
   return (
     <TableContainer>
       <Table sx={{width: '100% !important', display: 'table !important'}}>

demo_assets/custom_components.tsx

@@ -1,9 +1,9 @@
 import {ComponentDeclarations} from 'lib/loaders/handlebars-helpers';
 
-import DemoComponent from './component_demo';
+import DemoRobotTable from './component_demo';
 
 const components: ComponentDeclarations = {
-  DemoRobotTable: (ctx: any) => <DemoComponent {...ctx} />,
+  DemoRobotTable: (ctx: any) => <DemoRobotTable {...ctx} />,
 };
 
 export default components;

pages/markdown.tsx

@@ -12,22 +12,10 @@ import {MDXProvider} from '@mdx-js/react';
 
 import {TABS} from './index';
 
-import Md from 'demo_assets/markdown_demo.md?full';
+import customComponents from 'demo_assets/custom_components';
+import {components} from 'qcr-sites-shared/loaders/handlebars-helpers';
 
-import DemoComponent from 'demo_assets/component_demo';
-
-import {Button} from '@mui/material';
-
-const cs = {
-  DemoComponent: (props) => (
-    <DemoComponent
-      name={props.name}
-      description={props.description}
-      image={props.image}
-      features={props.features}
-    />
-  ),
-};
+import Mdx from 'demo_assets/markdown_demo.md?full';
 
 export default function MarkdownPage() {
   return (
@@ -37,7 +25,7 @@ export default function MarkdownPage() {
         <QcrText>
           <QcrTitle>Demonstration of markdown capabilities</QcrTitle>
           <QcrMarkdown>
-            <Md components={cs} />
+            <Mdx components={{...components, ...customComponents}} />
           </QcrMarkdown>
         </QcrText>
       </QcrBody>