"use client";

import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, MotionConfig } from "motion/react";

export const FamilyDialog = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <MotionConfig
      transition={{ type: "spring", visualDuration: 0.24, bounce: 0 }}
    >
      <motion.div
        layoutId="modal"
        id="open-modal"
        className="max-w-[400px] w-full relative flex justify-center rounded-[30px]"
      >
        <motion.button
          layoutId="cta"
          whileTap={{ scale: 0.97 }}
          className="max-w-[300px] w-full bg-[#007aff] text-white py-[10px] px-[20px] rounded-[50px] cursor-pointer"
          onClick={() => setIsOpen(true)}
        >
          <motion.span layoutId="cta-text" className="inline-block">
            Remove searches
          </motion.span>
        </motion.button>
      </motion.div>

      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </MotionConfig>
  );
};

type DialogProps = {
  isOpen: boolean;
  onClose: () => void;
};

function Dialog({ isOpen, onClose }: DialogProps) {
  const dialogRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    if (!dialogRef.current) return;
    dialogRef.current.showModal();

    return () => dialogRef.current?.close();
  }, [dialogRef]);

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{
              duration: 0.2,
              ease: "cubic-bezier(.25, .46, .45, .94)",
            }}
            className="bg-[rgba(0,0,0,0.1)] fixed inset-0 z-50 backdrop-blur-[10px]"
          />
          <dialog
            ref={dialogRef}
            open={false}
            onCancel={(event) => {
              event.preventDefault();
              close();
            }}
            onClose={close}
            className="bg-transparent flex items-center justify-center w-full h-full max-w-full max-h-full overflow-hidden z-50 [&::backdrop]:hidden"
          >
            <motion.div
              layoutId="modal"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="bg-[#f3f3f3] dark:bg-[#18191d] max-w-[400px] relative bottom-[20px] overflow-clip flex items-start rounded-[30px] shadow-lg"
            >
              <motion.div
                layout
                initial={{ y: 100 }}
                animate={{ y: 0 }}
                exit={{ y: 100 }}
                className="p-5 relative h-fit flex-1"
              >
                <h2 className="text-lg font-medium">
                  Clear all recent searches?
                </h2>
                <p className="text-sm text-[#272727] dark:text-[#6a6a6a]">
                  This can't be undone and you'll remove all your recent
                  searches.
                </p>

                <div className="pt-5 flex justify-end gap-[10px]">
                  <motion.button
                    layoutId="cta"
                    whileTap={{ scale: 0.97 }}
                    layoutDependency={false}
                    onClick={onClose}
                    className="w-full max-w-[300px] bg-[#007aff] text-white py-[10px] px-[20px] rounded-[50px] cursor-pointer"
                  >
                    <motion.span layoutId="cta-text">Clear</motion.span>
                  </motion.button>
                  <button
                    onClick={onClose}
                    className="w-full max-w-[300px] bg-[#fbfbfb] dark:bg-[#262628] text-black dark:text-[#f5f5f5] py-[10px] px-[20px] rounded-[50px] cursor-pointer"
                  >
                    Cancel
                  </button>
                </div>
              </motion.div>
            </motion.div>
          </dialog>
        </>
      )}
    </AnimatePresence>
  );
}
Family Dialog

Installation

Installation
