feat(ui): add tooltips to action icons in admins table
This commit introduces the `react-tooltip` library to improve user interface clarity and provide a better user experience. Tooltips have been added to the action icons (Edit, Delete, Change Status) in the Admins table. This provides users with clear, on-hover information about the function of each icon, enhancing usability and reducing ambiguity. The implementation involved: - Adding `react-tooltip` as a project dependency. - Importing the required CSS in the root layout. - Integrating the `Tooltip` component within the Admins table.
This commit is contained in:
@@ -0,0 +1,18 @@
|
||||
import { CSSProperties } from "react";
|
||||
import { VariantType } from "react-tooltip";
|
||||
|
||||
export const _TooltipDefaultParams = ({
|
||||
id,
|
||||
variant = id === "delete" ? "error" : "info",
|
||||
styles,
|
||||
}: {
|
||||
id: string;
|
||||
variant?: VariantType;
|
||||
styles?: CSSProperties;
|
||||
}) => ({
|
||||
id,
|
||||
delayShow: 500,
|
||||
delayHide: 500,
|
||||
variant,
|
||||
style: { backgroundColor: variant === "error" ? "#F23030" : "", ...styles },
|
||||
});
|
||||
Reference in New Issue
Block a user