import React, { useState, useEffect, useRef } from "react";

function App() {

  const [isOpen, setIsOpen] = useState(false);

  const dropdownRef = useRef(null);

  useEffect(() => {

    const handleClickOutside = (event) => {

      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {

        setIsOpen(false);

      }

    };

    // Add event listener to handle clicks outside the dropdown

    document.addEventListener("mousedown", handleClickOutside);

    // Clean up the event listener on component unmount

    return () => {

      document.removeEventListener("mousedown", handleClickOutside);

    };

  }, []);

  const handleToggle = () => {

    setIsOpen((prev) => !prev);

  };

  return (

    <div ref={dropdownRef} className="dropdown">

      <button onClick={handleToggle}>Toggle Dropdown</button>

      {isOpen && (

        <div className="dropdown-content">

          {/* Dropdown content goes here */}

          <p>Dropdown content goes here</p>

        </div>

      )}

    </div>

  );

}

export default App;