ww

Author: traviskuhl

www/next.config.mjs

@@ -78,7 +78,7 @@ const nextConfig = {
 const opts = {
   components: { code: "Code" },
   syntaxHighlighting: {
-    theme: "github-dark",
+    theme: "github-dark-dimmed",
   },
   lineNumbers: false,
   showCopyButton: true,

www/src/app/globals.css

@@ -108,3 +108,16 @@ body {
     @apply m-0 text-sm;
   }
 }
+
+/* add the code bellow */
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}

www/src/components/code.tsx

@@ -1,8 +1,21 @@
 import {Pre, RawCode, highlight} from 'codehike/code';
 
+import {CopyButton} from './copy-button';
+
 export async function Code({codeblock}: {codeblock: RawCode}) {
-  const highlighted = await highlight(codeblock, 'github-dark');
+  const highlighted = await highlight(codeblock, 'github-dark-dimmed');
   return (
-    <Pre code={highlighted} handlers={[]} className="border border-zinc-800" />
+    <div className="relative not-prose mb-3">
+      <CopyButton
+        text={highlighted.code}
+        className="absolute right-px top-px bg-black p-2 rounded-lg"
+      />
+
+      <Pre
+        code={highlighted}
+        handlers={[]}
+        className="border pl-3 pr-12 py-2 rounded-lg overflow-auto bg-black text-sm no-scrollbar"
+      />
+    </div>
   );
 }

www/src/components/copy-button.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import {ComponentProps, useState} from 'react';
+
+import {Copy, Check} from 'lucide-react';
+
+export type CopyButtonProps = ComponentProps<'button'> & {
+  text: string;
+};
+
+export function CopyButton(props: CopyButtonProps) {
+  const {text, ...buttonProps} = props;
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <button
+      {...buttonProps}
+      aria-label="Copy to clipboard"
+      onClick={() => {
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1200);
+      }}>
+      {copied ? <Check size={16} /> : <Copy size={16} />}
+    </button>
+  );
+}