lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
39 lines • 2.75 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnimatedCopyButton = AnimatedCopyButton;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const framer_motion_1 = require("framer-motion");
const lucide_react_1 = require("lucide-react");
const utils_1 = require("@/components/lib/utils");
function AnimatedCopyButton({ textToCopy, className, size = "md", onCopy, }) {
const [isCopied, setIsCopied] = (0, react_1.useState)(false);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(textToCopy);
setIsCopied(true);
if (onCopy)
onCopy();
// Reset after 2 seconds
setTimeout(() => {
setIsCopied(false);
}, 2000);
}
catch (err) {
console.error("Failed to copy text: ", err);
}
};
const sizes = {
sm: "h-8 w-8",
md: "h-10 w-10",
lg: "h-12 w-12",
};
const iconSizes = {
sm: "h-4 w-4",
md: "h-5 w-5",
lg: "h-6 w-6",
};
return ((0, jsx_runtime_1.jsxs)("button", { onClick: handleCopy, className: (0, utils_1.cn)("relative flex items-center justify-center rounded-md border bg-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", sizes[size], className), "aria-label": "Copy to clipboard", children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: isCopied ? ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, scale: 0.5, rotate: -45 }, animate: { opacity: 1, scale: 1, rotate: 0 }, exit: { opacity: 0, scale: 0.5, rotate: 45 }, transition: { type: "spring", stiffness: 300, damping: 20 }, className: "absolute flex items-center justify-center text-green-500", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: iconSizes[size] }) }, "check")) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, scale: 0.5 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.5 }, transition: { type: "spring", stiffness: 300, damping: 20 }, className: "absolute flex items-center justify-center text-foreground/70", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: iconSizes[size] }) }, "copy")) }), isCopied && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0.5, scale: 1 }, animate: { opacity: 0, scale: 2 }, transition: { duration: 0.5 }, className: "absolute inset-0 rounded-md bg-green-500/20" }))] }));
}
//# sourceMappingURL=animated-copy-button.js.map