'use client'; import useClickOutside from '@/hooks/use-click-outside'; import { AnimatePresence, MotionConfig, motion } from 'framer-motion'; import { ArrowLeftIcon } from 'lucide-react'; import { useRef, useState, useEffect, useId } from 'react'; const TRANSITION = { type: 'spring', bounce: 0.05, duration: 0.3, }; function Popover() { const uniqueId = useId(); const formContainerRef = useRef(null); const [isOpen, setIsOpen] = useState(false); const [note, setNote] = useState(null); const openMenu = () => { setIsOpen(true); }; const closeMenu = () => { setIsOpen(false); setNote(null); }; useClickOutside(formContainerRef, () => { closeMenu(); }); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === 'Escape') { closeMenu(); } }; document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('keydown', handleKeyDown); }; }, []); return (

Add Note {isOpen && (

{ e.preventDefault(); }} >

setNote(e.target.value)}
                />
                <div key='close' className='flex justify-between px-4 py-3'>
                  <button
                    type='button'
                    className='flex items-center'
                    onClick={closeMenu}
                    aria-label='Close popover'
                  >
                    <ArrowLeftIcon
                      size={16}
                      className='text-zinc-900 dark:text-zinc-100'
                    />
                  </button>
                  <button
                    className='relative ml-1 flex h-8 shrink-0 scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 bg-transparent px-2 text-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98] dark:border-zinc-50/10 dark:text-zinc-50 dark:hover:bg-zinc-800'
                    type='submit'
                    aria-label='Submit note'
                    onClick={() => {
                      closeMenu();
                    }}
                  >
                    Submit Note
                  </button>
                </div>
              </form>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </MotionConfig>
  );
}

export { Popover };</article></body></html>