Fix misisng import

components/CodeBlock/CodeBlock.tsx

@@ -12,7 +12,7 @@ interface CodeBlockProps {
   language: HljsLanguage;
 }
 
-function CodeBlock({ code, language }: CodeBlockProps) {
+export function CodeBlock({ code, language }: CodeBlockProps) {
   const handleCopy = () => {
     void navigator.clipboard.writeText(code);
     toast("Copied to clipboard", {
@@ -43,5 +43,3 @@ function CodeBlock({ code, language }: CodeBlockProps) {
     </div>
   );
 }
-
-export { CodeBlock };

components/index.tsx

@@ -58,10 +58,12 @@ import { IndeterminateCheckbox } from "./IndeterminateCheckbox/IndeterminateChec
 import { DocsLayout } from "./DocsLayout/DocsLayout";
 import { OrganizationDashboardLink } from "./OrganizationDashboardLink";
 import { Modal } from "./Modal/Modal";
+import { CodeBlock } from "./CodeBlock/CodeBlock";
 
 export type { EditVotingGuideCandidate, FlagColor, NavItem };
 
 export {
+  CodeBlock,
   Modal,
   OrganizationDashboardLink,
   DocsLayout,

mdx-components.tsx

@@ -0,0 +1,13 @@
+import type { MDXComponents } from "mdx/types";
+
+// This file allows you to provide custom React components
+// to be used in MDX files. You can import and use any
+// React component you want, including inline styles,
+// components from other libraries, and more.
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    // Allows customizing built-in components, e.g. to add styling.
+    ...components,
+  };
+}

pages/docs/api/introduction.mdx

@@ -19,14 +19,12 @@ A query to the Populist API could looks something like this:
 
 <CodeBlock
   code={`query {
-            elections(filter: {
-            state: CO
-            }) {
-            title
-            description
-            electionDate
-          }
-        }`}
+    elections(filter: { state: CO }) {
+      title
+      description
+      electionDate
+    }
+}`}
   language="graphql"
 />