"use client"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; import { Check, Copy } from "lucide-react"; import { useTheme } from "next-themes"; import { HTMLAttributes, useEffect, useState } from "react"; import { codeToHtml } from "shiki"; interface ScriptCopyBtnProps extends HTMLAttributes { showMultiplePackageOptions?: boolean; codeLanguage: string; lightTheme: string; darkTheme: string; commandMap: Record; className?: string; } export function ScriptCopyBtn({ showMultiplePackageOptions = true, codeLanguage, lightTheme, darkTheme, commandMap, className, }: ScriptCopyBtnProps) { const packageManagers = Object.keys(commandMap); const [packageManager, setPackageManager] = useState(packageManagers[0]); const [copied, setCopied] = useState(false); const [highlightedCode, setHighlightedCode] = useState(""); const { theme } = useTheme(); const command = commandMap[packageManager]; useEffect(() => { async function loadHighlightedCode() { try { const highlighted = await codeToHtml(command, { lang: codeLanguage, themes: { light: lightTheme, dark: darkTheme, }, defaultColor: theme === "dark" ? "dark" : "light", }); setHighlightedCode(highlighted); } catch (error) { console.error("Error highlighting code:", error); setHighlightedCode(`

${command}

`); } } loadHighlightedCode(); }, [command, theme, codeLanguage, lightTheme, darkTheme]); const copyToClipboard = () => { navigator.clipboard.writeText(command); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return (

{showMultiplePackageOptions && (

{packageManagers.map((pm, index) => (

{index > 0 && ( ))}

)}

{highlightedCode ? (

pre]:overflow-x-auto [&>pre]:rounded-md [&>pre]:p-2 [&>pre]:px-4 [&>pre]:font-mono ${ theme === "dark" ? "dark" : "light" }`} dangerouslySetInnerHTML={{ __html: highlightedCode }} /> ) : (

                {command}

)}

); }