'use client'
import { useEffect, useRef } from 'react'
{{#IF_DESIGN_FRAMER_MOTION}}
import { AnimatePresence, motion } from 'framer-motion'
{{/IF_DESIGN_FRAMER_MOTION}}
/**
* Modal — Dialog overlay
* Generated by Traqr Init ({{DESIGN_FLAVOR}} flavor). Edit freely.
*
* Usage:
* setIsOpen(false)} title="Confirm">
* Are you sure?
*
*/
interface ModalProps {
open: boolean
onClose: () => void
title?: string
children: React.ReactNode
className?: string
}
export function Modal({ open, onClose, title, children, className = '' }: ModalProps) {
const overlayRef = useRef(null)
// Close on Escape
useEffect(() => {
if (!open) return
function handleKey(e: KeyboardEvent) {
if (e.key === 'Escape') onClose()
}
document.addEventListener('keydown', handleKey)
return () => document.removeEventListener('keydown', handleKey)
}, [open, onClose])
// Close on overlay click
function handleOverlayClick(e: React.MouseEvent) {
if (e.target === overlayRef.current) onClose()
}
{{#IF_DESIGN_FRAMER_MOTION}}
return (
{open && (
{title && (
)}
{children}
)}
)
{{/IF_DESIGN_FRAMER_MOTION}}
if (!open) return null
return (
{title && (
)}
{children}
)
}