feat: adds syntax highlighting to a11y demo (#836)

Signed-off-by: Anthony D. Mays <[email protected]>

Author: anthonydmays

supplemental7/a11y/app/components/CodeBlock.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+interface CodeBlockProps {
+  code: string;
+  language?: 'tsx' | 'jsx' | 'html' | 'css' | 'javascript' | 'typescript';
+}
+
+export function CodeBlock({ code, language = 'tsx' }: CodeBlockProps) {
+  return (
+    <div className="mt-4">
+      <SyntaxHighlighter
+        language={language}
+        style={vscDarkPlus}
+        customStyle={{
+          margin: 0,
+          borderRadius: '0.375rem',
+          fontSize: '0.75rem',
+          lineHeight: '1rem',
+        }}
+        codeTagProps={{
+          style: {
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+          },
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}