Build/use clipboard use err

src/components/ui/code-block.tsx

@@ -100,7 +100,7 @@ export function CodeBlockCopyButton({
   ...props
 }: CodeBlockCopyButtonProps) {
   const { code } = use(CodeBlockContext);
-  const { copy, copied } = useClipboard();
+  const [copied, copy] = useClipboard();
 
   return (
     <Button

src/components/ui/snippet.tsx

@@ -33,7 +33,7 @@ export const SnippetTab = ({ className, ...props }: ComponentProps<typeof Tab>)
 export const SnippetTabPanels = TabPanels;
 
 export function SnippetTabPanel({ className, children, ...props }: TabPanelProps) {
-  const { copy, copied } = useClipboard();
+  const [copied, copy] = useClipboard();
   return (
     <TabPanel className={cx("mt-0 px-4 py-2 text-sm dark:bg-secondary/70", className)} {...props}>
       {(values) => (

src/hooks/use-clipboard.ts

@@ -1,37 +1,32 @@
-import { useCallback, useRef, useState } from "react";
-
-export function useClipboard(resetDelay: number = 2000): {
-  copied: boolean;
-  copy: (value: string) => Promise<boolean>;
-} {
-  const [copied, setCopied] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  function copiedfunc() {
-    setCopied(true);
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
+// Credit: https://usehooks-ts.com/
+import { useState } from "react";
+
+export type CopiedValue = string | null;
+export type CopyFn = (text: string) => Promise<boolean>;
+export type UseClipboardReturn = [CopiedValue, CopyFn];
+
+export function useClipboard(): UseClipboardReturn {
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+  const copy: CopyFn = async (text) => {
+    if (!navigator?.clipboard) {
+      console.warn("Clipboard not supported");
+
+      return false;
     }
-    timeoutRef.current = setTimeout(() => setCopied(false), resetDelay);
-  }
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: markCopied would trigger unnecessary rerenders
-  const copy = useCallback(
-    async (value: string): Promise<boolean> => {
-      if (!window.isSecureContext || !navigator?.clipboard?.writeText) {
-        return false;
-      }
-
-      try {
-        await navigator.clipboard.writeText(value);
-        copiedfunc();
-        return true;
-      } catch {
-        return false;
-      }
-    },
-    [resetDelay],
-  );
-
-  return { copied, copy };
+
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+
+      return true;
+    } catch (error) {
+      console.warn("Copy failed", error);
+      setCopiedText(null);
+
+      return false;
+    }
+  };
+
+  return [copiedText, copy];
 }

vite.config.ts

@@ -5,8 +5,9 @@ import { fileURLToPath } from "node:url";
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 import tailwindcss from "@tailwindcss/vite";
 import { playwright } from "@vitest/browser-playwright";
-import { defineConfig, type Plugin } from "vite";
+import type { Plugin } from "vite";
 import dts from "vite-plugin-dts";
+import { defineConfig } from "vitest/config";
 
 const dirname = typeof __dirname !== "undefined" ? __dirname : path.dirname(fileURLToPath(import.meta.url));