Files
nym/explorer-nextjs/app/components/Tooltip.tsx
T
Fouad e5f41731ae Explorer NextJS Rebuild (#4534)
* bootstrap next app + add overview page

* fix AssetList type

* fix up nav stuff

* Refactor Nav component and add network components pages

* Refactor WorldMap component and update TelegramIcon, GitHubIcon, NymVpnIcon, DiscordIcon, and TwitterIcon components

* add service providers page

* mixnodes page

* delegations page + use material react table for all tables

* nodes map page

* Refactor StyledLink component and remove unnecessary console.log statements

* Refactor ESLint configuration, remove unused dependencies, and update component imports

* update deps

* Refactor imports and update dependencies

* fix dark mode

* build single mixnode page

* build single gateway page

* Refactor handleOnDelegate function to use useCallback in mixnodes page.tsx

* Add defaults for constants

---------

Co-authored-by: Mark Sinclair <mmsinclair@users.noreply.github.com>
2024-05-16 16:12:06 +01:00

37 lines
1004 B
TypeScript

import React, { ReactElement } from 'react';
import { Tooltip as MUITooltip, TooltipComponentsPropsOverrides, TooltipProps } from '@mui/material';
type ValueType<T> = T[keyof T];
type Props = {
text: string;
id: string;
placement?: ValueType<Pick<TooltipProps, 'placement'>>;
tooltipSx?: TooltipComponentsPropsOverrides;
children: React.ReactNode;
};
export const Tooltip = ({ text, id, placement, tooltipSx, children }: Props) => (
<MUITooltip
title={text}
id={id}
placement={placement || 'top-start'}
componentsProps={{
tooltip: {
sx: {
maxWidth: 200,
background: (t) => t.palette.nym.networkExplorer.tooltip.background,
color: (t) => t.palette.nym.networkExplorer.tooltip.color,
'& .MuiTooltip-arrow': {
color: (t) => t.palette.nym.networkExplorer.tooltip.background,
},
},
...tooltipSx,
},
}}
arrow
>
{children as ReactElement<any, any>}
</MUITooltip>
);