forked from github/plane
1e152c666c
* chore: moved app & space from apps to root * chore: modified workspace configuration * chore: modified dockerfiles for space and web * chore: modified icons for space * feat: updated files for new svg icons supported by next-images * chore: added /spaces base path for next * chore: added compose config for space * chore: updated husky configuration * chore: updated workflows for new configuration * chore: changed app name to web * fix: resolved build errors with web * chore: reset file tracing root for both projects * chore: added nginx config for deploy * fix: eslint and tsconfig settings for space app * husky setup fixes based on new dir * eslint fixes * prettier formatting --------- Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
import React from "react";
|
|
|
|
// next-themes
|
|
import { useTheme } from "next-themes";
|
|
// tooltip2
|
|
import { Tooltip2 } from "@blueprintjs/popover2";
|
|
|
|
type Props = {
|
|
tooltipHeading?: string;
|
|
tooltipContent: string | React.ReactNode;
|
|
position?:
|
|
| "top"
|
|
| "right"
|
|
| "bottom"
|
|
| "left"
|
|
| "auto"
|
|
| "auto-end"
|
|
| "auto-start"
|
|
| "bottom-left"
|
|
| "bottom-right"
|
|
| "left-bottom"
|
|
| "left-top"
|
|
| "right-bottom"
|
|
| "right-top"
|
|
| "top-left"
|
|
| "top-right";
|
|
children: JSX.Element;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
openDelay?: number;
|
|
closeDelay?: number;
|
|
};
|
|
|
|
export const Tooltip: React.FC<Props> = ({
|
|
tooltipHeading,
|
|
tooltipContent,
|
|
position = "top",
|
|
children,
|
|
disabled = false,
|
|
className = "",
|
|
openDelay = 200,
|
|
closeDelay,
|
|
}) => {
|
|
const { theme } = useTheme();
|
|
|
|
return (
|
|
<Tooltip2
|
|
disabled={disabled}
|
|
hoverOpenDelay={openDelay}
|
|
hoverCloseDelay={closeDelay}
|
|
content={
|
|
<div
|
|
className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md border border-custom-border-200 ${
|
|
theme === "custom" ? "bg-custom-background-100 text-custom-text-200" : "bg-black text-gray-400"
|
|
} break-words overflow-hidden ${className}`}
|
|
>
|
|
{tooltipHeading && (
|
|
<h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
|
|
{tooltipHeading}
|
|
</h5>
|
|
)}
|
|
{tooltipContent}
|
|
</div>
|
|
}
|
|
position={position}
|
|
renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
|
|
React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
|
|
}
|
|
/>
|
|
);
|
|
};
|