plane/web/components/common/new-empty-state.tsx

import React, { useState } from "react";

import Image from "next/image";

// ui
import { Button } from "@plane/ui";

type Props = {
  title: string;
  description?: React.ReactNode;
  image: any;
  comicBox?: {
    direction: "left" | "right";
    title: string;
    description: string;
    extraPadding?: boolean;
  };
  primaryButton?: {
    icon?: any;
    text: string;
    onClick: () => void;
  };
  disabled?: boolean;
};

export const NewEmptyState: React.FC<Props> = ({
  title,
  description,
  image,
  primaryButton,
  disabled = false,
  comicBox,
}) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };
  return (
    <div className=" flex h-full w-full flex-col items-center justify-center ">
      <div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-16">
        <h3 className="text-2xl font-semibold">{title}</h3>
        {description && <p className=" text-lg">{description}</p>}
        <div className="relative w-full max-w-6xl">
          <Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
        </div>

        <div className="relative flex items-start justify-center">
          {primaryButton && (
            <Button
              className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
              size="lg"
              variant="primary"
              onClick={primaryButton.onClick}
              disabled={disabled}
            >
              {primaryButton.text}
              <div
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
                className={`absolute bg-blue-300 ${
                  comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
                } z-10 h-2.5 w-2.5 animate-ping rounded-full`}
              />
              <div
                className={`absolute bg-blue-400/40 ${
                  comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
                } h-1.5 w-1.5 rounded-full`}
              />
            </Button>
          )}
          {comicBox &&
            isHovered &&
            (comicBox.direction === "right" ? (
              <div
                className={`absolute left-1/2 top-0 flex max-w-sm ${
                  comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
                } pb-5`}
              >
                <div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
                  <div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
                </div>
                <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
                  <h1 className="p-5">
                    <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
                    <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
                  </h1>
                </div>
              </div>
            ) : (
              <div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
                <div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
                  <div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
                </div>
                <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
                  <h1 className="p-5">
                    <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
                    <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
                  </h1>
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
};