Radix Modal

'use client'

import { AnimatePresence, motion } from 'framer-motion'
import { Sparkles } from 'lucide-react'

export const ModalFramer = ({
    isOpen,
    setIsOpen
}: {
    isOpen: boolean
    setIsOpen: (isOpen: boolean) => void
}) => {
    return (
        <AnimatePresence>
            {isOpen && (
                <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    onClick={() => setIsOpen(false)}
                    className="bg-slate-900/10 backdrop-blur p-8 fixed inset-0 z-50 grid place-items-center overflow-y-scroll">
                    <motion.div
                        initial={{ scale: 0, rotate: '7.5deg' }}
                        animate={{ scale: 1, rotate: '0deg' }}
                        exit={{ scale: 0, rotate: '0deg' }}
                        transition={{
                            type: 'spring',
                            stiffness: 200,
                            damping: 20,
                            duration: 0.05
                        }}
                        onClick={(e) => e.stopPropagation()}
                        className="bg-white text-black p-6 rounded-lg w-full max-w-lg shadow-white shadow-sm cursor-default relative overflow-hidden">
                        <Sparkles className="text-white/10 rotate-12 text-[250px] absolute z-0 -top-24 -left-24" />
                        <div className="relative z-10">
                            <div className="bg-gray-100 w-16 h-16 mb-2 rounded-full text-3xl text-black grid place-items-center mx-auto">
                                <Sparkles />
                            </div>
                            <h3 className="text-3xl font-bold text-center mb-2">Framer Modal</h3>
                            <p className="text-center mb-6">
                                A simple modal using Framer Motion, featuring smooth animations and
                                transitions for an engaging slide experience
                            </p>
                            <div className="flex gap-2">
                                <button
                                    onClick={() => setIsOpen(false)}
                                    className=" text-gray-400 w-full py-2">
                                    Maybe later
                                </button>
                                <button
                                    onClick={() => setIsOpen(false)}
                                    className="text-black w-full py-2">
                                    Amazing!
                                </button>
                            </div>
                        </div>
                    </motion.div>
                </motion.div>
            )}
        </AnimatePresence>
    )
}

import type { Config } from 'tailwindcss'

const config = {
    darkMode: ['class'],
    content: [
        './pages/**/*.{ts,tsx}',
        './components/**/*.{ts,tsx}',
        './app/**/*.{ts,tsx}',
        './src/**/*.{ts,tsx}'
    ],
    prefix: '',
    theme: {
        extend: {
            keyframes: {
                // other keyframes ...

                // Radix modal
                dialogOverlayShow: {
                    from: { opacity: '0' },
                    to: { opacity: '1' }
                },

                dialogContentShow: {
                    from: {
                        opacity: '0',
                        transform: 'translate(-50%, -45%) scale(0.95)'
                    },
                    to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' }
                },
            },
            animation: {
                // other animation ...

                // Radix Modal
                dialogOverlayShow: 'dialogOverlayShow 300ms cubic-bezier(0.16, 1, 0.3, 1)',
                dialogContentShow: 'dialogContentShow 300ms cubic-bezier(0.16, 1, 0.3, 1)',
            }
        }
    },
    plugins: [require('tailwindcss-animate')]
} satisfies Config

return config