Untitled

import { useEffect, useRef, useState } from "preact/hooks";

const UserAvatarButton = ({ social }) => {
  const [showDropdown, setShowDropdown] = useState(false);
  const divRef = useRef(null);
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (divRef.current && !divRef.current.contains(event.target)) {
        setShowDropdown(false);
      }
    };

    document.addEventListener("click", handleClickOutside, true);
    return () => {
      document.removeEventListener("click", handleClickOutside, true);
    };
  }, [divRef]);

  useEffect(() => {
    const buttonListener = () => {
      setShowDropdown(!showDropdown);
    };

    if (buttonRef.current) {
      (buttonRef.current as HTMLButtonElement).addEventListener(
        "click",
        buttonListener
      );
    }
  }, [showDropdown]);

  return (
    <div>
      {social ? (
        <div ref={divRef}>
          <button
            ref={buttonRef}
            title="dropdownDefaultButton"
            data-dropdown-toggle="dropdown"
            class="text-white focus:outline-none font-medium rounded-lg text-sm px-4 py-0.5 text-center inline-flex items-center"
            type="button"
          >
            <img class="w-10 h-10 rounded-full" src={social} />
            <svg
              class={`w-4 h-4 ml-2 ${showDropdown ? "rotate-180" : "rotate-0"}`}
              aria-hidden="true"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              ></path>
            </svg>
          </button>

          <div
            id="dropdown"
            class={`${
              showDropdown ? "" : "hidden"
            } z-10 absolute right-1 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700`}
          >
            <ul
              class="py-2 text-sm text-gray-700 dark:text-gray-200"
              aria-labelledby="dropdownDefaultButton"
            >
              <li>
                <a
                  href="/members"
                  class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                >
                  Dashboard
                </a>
              </li>
              <li>
                <a
                  href="/sign-out"
                  class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                >
                  Sign out
                </a>
              </li>
            </ul>
          </div>
        </div>
      ) : (
        <div ref={divRef}>
          <button
            ref={buttonRef}
            title="dropdownDefaultButton"
            data-dropdown-toggle="dropdown"
            class="text-white focus:outline-none font-medium rounded-lg text-sm px-4 py-0.5 text-center inline-flex items-center"
            type="button"
          >
            <div class="flex w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
              <svg
                class="w-12 h-12 text-gray-300"
                fill="currentColor"
                viewBox="0 0 20 16"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </div>
            <svg
              class={`w-4 h-4 ml-2 ${showDropdown ? "rotate-180" : "rotate-0"}`}
              aria-hidden="true"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              ></path>
            </svg>
          </button>

          <div
            id="dropdown"
            class={`${
              showDropdown ? "" : "hidden"
            } z-10 absolute right-1 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700`}
          >
            <ul
              class="py-2 text-sm text-gray-700 dark:text-gray-200"
              aria-labelledby="dropdownDefaultButton"
            >
              <li>
                <a
                  href="/members"
                  class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                >
                  Dashboard
                </a>
              </li>
              <li>
                <a
                  href="/sign-out"
                  class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                >
                  Sign out
                </a>
              </li>
            </ul>
          </div>
        </div>
      )}
    </div>
  );
};

export default UserAvatarButton;