blur-toggle-button

1"use client";
2import React, { useState } from "react";
3import { AnimatePresence, motion } from "framer-motion";
4import { Check, Copy } from "lucide-react";
5 
6const BlurToggleButton = () => {
7  const [checked, setChecked] = useState(false);
8 
9  return (
10    <motion.button
11      whileTap={{
12        scale: 0.95,
13      }}
14      className="border p-3 rounded-md bg-background cursor-pointer"
15      onClick={() => {
16        setChecked(!checked);
17      }}
18    >
19      <AnimatePresence mode="wait">
20        {checked ? (
21          <motion.div
22            key="copy"
23            initial={{ filter: "blur(1px)", scale: 1 }}
24            animate={{ filter: "blur(0px)", scale: 1.2 }}
25            exit={{ filter: "blur(1px)", scale: 0.8 }}
26            transition={{ duration: 0.05 }}
27          >
28            <Copy size={16} />
29          </motion.div>
30        ) : (
31          <motion.div
32            key="check"
33            initial={{ filter: "blur(1px)", scale: 1 }}
34            animate={{ filter: "blur(0px)", scale: 1.2 }}
35            exit={{ filter: "blur(1px)", scale: 0.8 }}
36            transition={{ duration: 0.05 }}
37          >
38            <Check size={16} />
39          </motion.div>
40        )}
41      </AnimatePresence>
42    </motion.button>
43  );
44};
45 
46export default BlurToggleButton;