feat: add copy button for code

public/blogs/tester.mdx

@@ -152,7 +152,7 @@ async function VideoComponent({ fileName }) {
 }`}
 language="typescript"
 showLineNumbers={true}
-
+copy={false}
 > </Code>
             <C>
                 All data is encrypted via SSL/TLS when transmitted from our servers to your browser.

src/app/components/nav/nav.tsx

@@ -12,10 +12,7 @@ const Nav = () => {
         )}
       >
         <div className="flex flex-col gap-4 md:flex-row md:gap-8">
-          <Link
-            className="nav-link-shadow dimmed-4 hover:text-white"
-            href="/"
-          >
+          <Link className="nav-link-shadow dimmed-4 hover:text-white" href="/">
             Home
           </Link>
           <Link

src/app/components/reusables/code-block.tsx

@@ -8,6 +8,7 @@ import typescript from 'react-syntax-highlighter/dist/cjs/languages/prism/typesc
 import go from 'react-syntax-highlighter/dist/cjs/languages/prism/go';
 import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
 import oneDark from 'react-syntax-highlighter/dist/cjs/styles/prism/one-dark';
+import CopyButton from './copy-code';
 
 SyntaxHighlighter.registerLanguage('rust', rust);
 SyntaxHighlighter.registerLanguage('python', python);
@@ -20,13 +21,15 @@ type Props = {
   code: string;
   showLineNumbers?: boolean;
   className?: string;
+  copy?: boolean;
 };
 
 export default function CodeBlock({
   code,
   language,
   showLineNumbers,
   className,
+  copy = true,
 }: Props) {
   return (
     <div
@@ -35,6 +38,12 @@ export default function CodeBlock({
         className
       )}
     >
+      {copy && (
+        <CopyButton
+          code={code}
+          className="absolute right-2 top-2 inline-flex items-center"
+        />
+      )}
       <SyntaxHighlighter
         className="!m-0 overflow-auto !p-0 text-sm dark:!bg-black dark:[&>*]:!bg-black"
         language={language}

src/app/components/reusables/copy-code.tsx

@@ -0,0 +1,29 @@
+'use client';
+import { FC } from 'react';
+import { Copy } from 'lucide-react';
+import clsx from 'clsx';
+import { useCopyToClipboard } from 'react-use';
+
+interface CopyButtonProps {
+  code: string;
+  className?: string;
+}
+
+const CopyButton: FC<CopyButtonProps> = ({ code, className }) => {
+  const [_, copyToClipboard] = useCopyToClipboard();
+  return (
+    <button
+      className={clsx(
+        'rounded-xl border-2 border-[#191919] p-2 px-3 py-2 transition hover:border-[#340929]   active:bg-[#340929]',
+        className
+      )}
+      onClick={() => {
+        copyToClipboard(code);
+      }}
+    >
+      <Copy size={'24px'} strokeWidth={'2px'} />
+    </button>
+  );
+};
+
+export default CopyButton;