Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x | import { AnimatePresence, motion } from 'framer-motion';
import { Plus as PlusIcon } from 'lucide-react';
import React, { useState } from 'react';
interface AddLayerButtonProps {
onCreate: () => void;
disabled?: boolean;
}
export const AddLayerButton = React.memo(function AddLayerButton({
onCreate,
disabled,
}: AddLayerButtonProps) {
const [hoverAdd, setHoverAdd] = useState(false);
return (
<button
onClick={() => !disabled && onCreate()}
disabled={disabled}
onMouseEnter={() => setHoverAdd(true)}
onMouseLeave={() => setHoverAdd(false)}
className="
relative text-sm font-medium text-indigo-600
flex items-center gap-2 self-start mt-1
px-3 py-2 rounded-md border border-indigo-200 bg-indigo-50/70
hover:bg-indigo-100 hover:border-indigo-300 transition-all
"
>
{/* Animated '+' icon on hover using Framer Motion (AnimatePresence) */}
<AnimatePresence mode="wait">
{hoverAdd && (
<motion.span
key="plus"
initial={{
opacity: 0,
rotate: -90,
x: -6,
scale: 0.8,
}}
animate={{
opacity: 1,
rotate: 0,
x: 0,
scale: 1,
}}
exit={{
opacity: 0,
rotate: 90,
x: -6,
scale: 0.8,
}}
transition={{ duration: 0.25 }}
className="flex items-center justify-center"
>
<PlusIcon className="w-4 h-4 text-indigo-600" />
</motion.span>
)}
</AnimatePresence>
<span>Add Layer</span>
</button>
);
});
|