File size: 2,194 Bytes
9e4583c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | "use client";
import { useState } from "react";
import Modal from "./Modal";
import Button from "./Button";
export default function ManualConfigModal({
isOpen,
onClose,
title = "Manual Configuration",
configs = [],
}) {
const [copiedIndex, setCopiedIndex] = useState(null);
const copyToClipboard = async (text, index) => {
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text);
} else {
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.style.position = "fixed";
textarea.style.left = "-9999px";
textarea.style.top = "-9999px";
textarea.style.opacity = "0";
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
}
setCopiedIndex(index);
setTimeout(() => setCopiedIndex(null), 2000);
} catch (err) {
console.log("Failed to copy:", err);
}
};
return (
<Modal isOpen={isOpen} onClose={onClose} title={title} size="xl">
<div className="flex flex-col gap-4">
{configs.map((config, index) => (
<div key={index} className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-text-main">{config.filename}</span>
<Button
variant="ghost"
size="sm"
onClick={() => copyToClipboard(config.content, index)}
>
<span className="material-symbols-outlined text-[14px] mr-1">
{copiedIndex === index ? "check" : "content_copy"}
</span>
{copiedIndex === index ? "Copied!" : "Copy"}
</Button>
</div>
<pre className="px-3 py-2 bg-black/5 dark:bg-white/5 rounded font-mono text-xs overflow-x-auto whitespace-pre-wrap break-all max-h-60 overflow-y-auto border border-border">
{config.content}
</pre>
</div>
))}
</div>
</Modal>
);
}
|