chore: code refactor (#2450)

This commit is contained in:
Anmol Singh Bhatia 2023-10-17 12:19:34 +05:30 committed by GitHub
parent fc99615875
commit e496cec49f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 48 deletions

View File

@ -33,8 +33,6 @@
"dependencies": { "dependencies": {
"@blueprintjs/core": "^4.16.3", "@blueprintjs/core": "^4.16.3",
"@blueprintjs/popover2": "^1.13.3", "@blueprintjs/popover2": "^1.13.3",
"@headlessui/react": "^1.7.17", "@headlessui/react": "^1.7.17"
"clsx": "^2.0.0",
"next-themes": "^0.2.1"
} }
} }

View File

@ -47,13 +47,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
> >
{prependIcon && ( {prependIcon && (
<div className={buttonIconStyle}> <div className={buttonIconStyle}>
{React.cloneElement(prependIcon, { "stroke-width": 2 })} {React.cloneElement(prependIcon, { strokeWidth: 2 })}
</div> </div>
)} )}
{children} {children}
{appendIcon && ( {appendIcon && (
<div className={buttonIconStyle}> <div className={buttonIconStyle}>
{React.cloneElement(appendIcon, { "stroke-width": 2 })} {React.cloneElement(appendIcon, { strokeWidth: 2 })}
</div> </div>
)} )}
</button> </button>

View File

@ -1,7 +1,6 @@
import React from "react"; import React from "react";
// next-themes // next-themes
import { useTheme } from "next-themes";
import { Tooltip2 } from "@blueprintjs/popover2"; import { Tooltip2 } from "@blueprintjs/popover2";
export type TPosition = export type TPosition =
@ -41,46 +40,32 @@ export const Tooltip: React.FC<ITooltipProps> = ({
className = "", className = "",
openDelay = 200, openDelay = 200,
closeDelay, closeDelay,
}) => { }) => (
const { theme } = useTheme(); <Tooltip2
disabled={disabled}
return ( hoverOpenDelay={openDelay}
<Tooltip2 hoverCloseDelay={closeDelay}
disabled={disabled} content={
hoverOpenDelay={openDelay} <div
hoverCloseDelay={closeDelay} className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md bg-custom-background-100 text-custom-text-200 break-words overflow-hidden ${className}`}
content={ >
<div {tooltipHeading && (
className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${ <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>
theme === "custom" )}
? "bg-custom-background-100 text-custom-text-200" {tooltipContent}
: "bg-black text-gray-400" </div>
} break-words overflow-hidden ${className}`} }
> position={position}
{tooltipHeading && ( renderTarget={({
<h5 isOpen: isTooltipOpen,
className={`font-medium ${ ref: eleReference,
theme === "custom" ? "text-custom-text-100" : "text-white" ...tooltipProps
}`} }) =>
> React.cloneElement(children, {
{tooltipHeading}
</h5>
)}
{tooltipContent}
</div>
}
position={position}
renderTarget={({
isOpen: isTooltipOpen,
ref: eleReference, ref: eleReference,
...tooltipProps ...tooltipProps,
}) => ...children.props,
React.cloneElement(children, { })
ref: eleReference, }
...tooltipProps, />
...children.props, );
})
}
/>
);
};