"use client"; import { useEffect, useState, type ReactNode } from "react"; import { AnimatePresence, motion, type Variants } from "framer-motion"; import { ArrowRight, GitBranch, GitCommitHorizontal, Globe, Rocket, X, } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]; const backdropVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, }; const panelVariants: Variants = { hidden: { opacity: 0, scale: 0.94, y: 10 }, visible: { opacity: 1, scale: 1, y: 0 }, }; /** * A centered dialog that springs into view over a blurred backdrop. * Positioned `absolute`, so its nearest positioned ancestor must be * `relative` (the demo container handles this). Escape and backdrop * clicks both request a close. */ export function AnimatedModal({ open, onClose, children, className, }: { open: boolean; onClose: () => void; children: ReactNode; className?: string; }) { useEffect(() => { if (!open) return; function onKey(e: KeyboardEvent) { if (e.key === "Escape") onClose(); } window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); return ( {open && (

Animated Modal