From 6c02d15223d7fe7e043944846b96ac6aded6c535 Mon Sep 17 00:00:00 2001
From: Wiley Conte <wileymckayconte@gmail.com>
Date: Fri, 20 Dec 2024 03:21:25 -0500
Subject: [PATCH] Fix misisng import

---
 components/CodeBlock/CodeBlock.tsx |  4 +---
 components/index.tsx               |  2 ++
 mdx-components.tsx                 | 13 +++++++++++++
 pages/docs/api/introduction.mdx    | 14 ++++++--------
 4 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 mdx-components.tsx

diff --git a/components/CodeBlock/CodeBlock.tsx b/components/CodeBlock/CodeBlock.tsx
index 7d33237d..619d2144 100644
--- a/components/CodeBlock/CodeBlock.tsx
+++ b/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 };
diff --git a/components/index.tsx b/components/index.tsx
index f751f616..2793e61d 100644
--- a/components/index.tsx
+++ b/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,
diff --git a/mdx-components.tsx b/mdx-components.tsx
new file mode 100644
index 00000000..2a578fc5
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/pages/docs/api/introduction.mdx b/pages/docs/api/introduction.mdx
index 010df00f..6f8d0c2c 100644
--- a/pages/docs/api/introduction.mdx
+++ b/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"
 />