components/clyde/message.tsx

import classNames from "classnames";
import { useState } from "react";
import { useMount, useUpdateEffect } from "react-use";

import { Clyde } from "./clyde";

export const ClydeMessage = ({
  message,
  auto = false,
  onClick,
}: {
  message: string;
  auto?: boolean;
  onClick: any;
}) => {
  const [show, setShow] = useState(false);

  useMount(() => {
    if (auto) {
      setTimeout(() => {
        setShow(true);
      }, 2000);
    }
  });

  useUpdateEffect(() => {
    if (auto && show) {
      setTimeout(() => {
        setShow(false);
      }, 5000);
    }
  }, [show]);

  return (
    <div
      className="left-0 lg:left-14 max-w-max group absolute top-0 transform -translate-y-[calc(100%-10px)] -z-1"
      onClick={onClick}
    >
      <Clyde />
      <div
        className={classNames(
          "transition-all duration-200 absolute top-2 left-0 bg-white shadow-xl text-sm text-dark-200 font-medium rounded-lg px-3.5 py-1.5 whitespace-nowrap transform group-hover:translate-x-[90px] opacity-0 group-hover:opacity-100",
          {
            "translate-x-[90px] opacity-100": show,
          }
        )}
      >
        {message}
        <div className="w-[0px] h-[0px] border-t-[7px] border-t-transparent border-b-[7px] border-b-transparent border-r-[7px] border-r-white absolute top-[calc(50%-7px)] -left-[6px]" />
      </div>
      {/* Hello<p>lol</p> */}
    </div>
  );
};