From a09d6f1639235e668a7dd0dee5392ab1cc16dd8c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 26 Jan 2022 12:31:37 +0100
Subject: chore: create a CodeBlock component for MDX rendering

---
 src/components/MDX/CodeBlock/CodeBlock.tsx | 38 ++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/MDX/CodeBlock/CodeBlock.tsx

(limited to 'src/components/MDX/CodeBlock/CodeBlock.tsx')

diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
new file mode 100644
index 0000000..ef8b587
--- /dev/null
+++ b/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -0,0 +1,38 @@
+import { config } from '@config/website';
+import { translateCopyButton } from '@utils/helpers/prism';
+import { useRouter } from 'next/router';
+import Prism from 'prismjs';
+import { ReactChildren, useEffect } from 'react';
+
+const CodeBlock = ({
+  className,
+  children,
+}: {
+  className: string;
+  children: ReactChildren;
+}) => {
+  const classNames = className.split('+');
+  const languageClass = classNames.find((name: string) =>
+    name.startsWith('language-')
+  );
+  const router = useRouter();
+  const locale = router.locale ? router.locale : config.locales.defaultLocale;
+
+  useEffect(() => {
+    Prism.highlightAll();
+  });
+
+  useEffect(() => {
+    translateCopyButton(locale);
+  }, [locale]);
+
+  return (
+    <div>
+      <pre className={classNames.join(' ')}>
+        <code className={languageClass}>{children}</code>
+      </pre>
+    </div>
+  );
+};
+
+export default CodeBlock;
-- 
cgit v1.2.3