Add visual feedback to copy button and download button

- Replace toast notification with visual state change (green check icon)
- Add new DownloadButton component for saving XML as .plist files
This commit is contained in:
cc
2026-04-14 19:35:40 +02:00
parent 868f871863
commit 996584f99d
2 changed files with 47 additions and 13 deletions
+17 -13
View File
@@ -1,21 +1,25 @@
"use client";
import { Copy } from "lucide-react";
import { useState } from "react";
import { Copy, Check } from "lucide-react";
import { Button } from "./ui/button";
import { toast } from "sonner";
export function CopyButton({ text }: { text: string }) {
const [copied, setCopied] = useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(text);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<div>
<Button
variant="outline"
onClick={() => {
navigator.clipboard.writeText(text);
toast("Copied");
}}
>
<Copy className="w-4 h-4" />
</Button>
</div>
<Button
variant="outline"
onClick={handleCopy}
className={copied ? "text-green-600 border-green-600" : ""}
>
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
</Button>
);
}
+30
View File
@@ -0,0 +1,30 @@
"use client";
import { Download } from "lucide-react";
import { Button } from "./ui/button";
export function DownloadButton({
content,
filename,
}: {
content: string;
filename: string;
}) {
const handleDownload = () => {
const blob = new Blob([content], { type: "application/xml" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
};
return (
<Button variant="outline" onClick={handleDownload}>
<Download className="w-4 h-4" />
</Button>
);
}