0067075ed1
* Update ScriptAccordion and ScriptItem components for improved styling * Add README.md for Proxmox VE Helper-Scripts Frontend * Remove testing dependencies and related test files from the frontend project * Update analytics URL in siteConfig to point to community-scripts.org * Refactor ESLint configuration to have one source of truth and run "npm lint" to apply new changes * Update lint script in package.json to remove npm * Add 'next' option to ESLint configuration for improved compatibility * Update package dependencies and versions in package.json and package-lock.json * Refactor theme provider import and enhance calendar component for dynamic icon rendering * rename sidebar, alerts and buttons * rename description and interfaces files * rename more files * change folder name * Refactor tooltip logic to improve updateable condition handling * Enhance CommandMenu to prevent duplicate scripts across categories * Remove test step from frontend CI/CD workflow
67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
"use client";
|
|
import { CheckIcon, ClipboardIcon } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { Card } from "./card";
|
|
|
|
export default function CodeCopyButton({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const [hasCopied, setHasCopied] = useState(false);
|
|
const isMobile = window.innerWidth <= 640;
|
|
|
|
useEffect(() => {
|
|
if (hasCopied) {
|
|
setTimeout(() => {
|
|
setHasCopied(false);
|
|
}, 2000);
|
|
}
|
|
}, [hasCopied]);
|
|
|
|
const handleCopy = (type: string, value: any) => {
|
|
navigator.clipboard.writeText(value);
|
|
|
|
setHasCopied(true);
|
|
|
|
const warning = localStorage.getItem("warning");
|
|
|
|
if (warning === null) {
|
|
localStorage.setItem("warning", "1");
|
|
setTimeout(() => {
|
|
toast.error(
|
|
"Be careful when copying scripts from the internet. Always remember check the source!",
|
|
{ duration: 8000 },
|
|
);
|
|
}, 500);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="mt-4 flex">
|
|
<Card className="flex items-center overflow-x-auto bg-primary-foreground pl-4 [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20">
|
|
<div className="overflow-x-auto whitespace-pre-wrap text-nowrap break-all pr-4 text-sm [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20">
|
|
{!isMobile && children ? children : "Copy install command"}
|
|
</div>
|
|
<button
|
|
onClick={() => handleCopy("install command", children)}
|
|
className={cn("bg-muted px-3 py-4")}
|
|
title="Copy"
|
|
>
|
|
{hasCopied
|
|
? (
|
|
<CheckIcon className="h-4 w-4" />
|
|
)
|
|
: (
|
|
<ClipboardIcon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|