mirror of
https://github.com/ChiChou/entdb.git
synced 2026-06-10 23:07:47 +02:00
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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user