Animated Dialog

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
5import { X } from "lucide-react";
6import { useState } from "react";
7 
8export function AnimatedDialog() {
9  const [isOpen, setIsOpen] = useState(false);
10  const shouldReduceMotion = useReducedMotion();
11 
12  const dialogAnimation = shouldReduceMotion
13    ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }
14    : {
15        initial: { opacity: 0, scale: 0.97, y: 16 },
16        animate: { opacity: 1, scale: 1, y: 0 },
17        exit: { opacity: 0, scale: 0.97, y: 16 },
18      };
19 
20  return (
21    <div>
22      <Button className="w-full" onClick={() => setIsOpen(true)}>
23        Open Dialog
24      </Button>
25 
26      <AnimatePresence>
27        {isOpen && (
28          <>
29            <motion.div
30              initial={{ opacity: 0 }}
31              animate={{ opacity: 1 }}
32              exit={{ opacity: 0 }}
33              transition={{ duration: 0.25, ease: "easeOut" }}
34              className="fixed inset-0 z-50 bg-background/70 backdrop-blur-sm"
35              onClick={() => setIsOpen(false)}
36            />
37 
38            <div className="fixed inset-0 z-50 flex items-center justify-center px-4 py-10">
39              <motion.div
40                {...dialogAnimation}
41                transition={{
42                  duration: shouldReduceMotion ? 0.2 : 0.4,
43                  ease: shouldReduceMotion ? "linear" : [0.16, 1, 0.3, 1],
44                }}
45                className="relative w-full max-w-md rounded-3xl border border-border/60 bg-card/90 p-6 shadow-[0_30px_120px_-40px_rgba(15,23,42,0.75)] backdrop-blur-xl"
46                onClick={(event) => event.stopPropagation()}
47                role="dialog"
48                aria-modal="true"
49                aria-labelledby="dialog-title"
50                aria-describedby="dialog-description"
51              >
52                <button
53                  onClick={() => setIsOpen(false)}
54                  className="absolute right-4 top-4 rounded-full border border-border/40 bg-white/5 p-2 text-muted-foreground transition-colors hover:text-foreground"
55                  aria-label="Close dialog"
56                >
57                  <motion.span
58                    animate={
59                      shouldReduceMotion
60                        ? undefined
61                        : { rotate: [0, 15, -15, 0] }
62                    }
63                    transition={
64// … truncated