forked from github/plane
9eb8f41008
* chore: add proper message for cycle/ module having start & end date but isn't active yet. * fix: infinite loader after updating workspace settings. * fix: user profile icon dropdown doesn't closes automatically. * style: fix inconsistent padding in cycle empty state. * chore: remove multiple `empty state` in labels settings and improve add label logic. * style: fix inconsistent padding in project label, integration and estimates empty state. * style: fix integrations settings breadcrumb title. * style: add proper `disabled` styles for email field in profile settings. * style: fix cycle layout height.
114 lines
4.3 KiB
TypeScript
114 lines
4.3 KiB
TypeScript
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 items-center justify-center overflow-y-auto">
|
|
<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-8">
|
|
<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>
|
|
</div>
|
|
);
|
|
};
|