import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useTheme, styled, Grid, IconButton } from '@mui/material'; import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'; import { OpenDialogs } from '../MainDialogs'; import { BubbleChart, Info, People, PriceChange, School } from '@mui/icons-material'; const StyledTooltip = styled(({ className, ...props }: TooltipProps) => ( ))(({ theme }) => ({ [`& .${tooltipClasses.tooltip}`]: { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, boxShadow: theme.shadows[1], fontSize: theme.typography.fontSize, borderRadius: '2em', }, })); interface MoreTooltipProps { open: OpenDialogs; setOpen: (state: OpenDialogs) => void; closeAll: OpenDialogs; children: JSX.Element; } const MoreTooltip = ({ open, setOpen, closeAll, children }: MoreTooltipProps): JSX.Element => { const { t } = useTranslation(); const theme = useTheme(); return ( setOpen({ ...closeAll, info: !open.info })} > setOpen({ ...closeAll, learn: !open.learn })} > setOpen({ ...closeAll, community: !open.community })} > setOpen({ ...closeAll, coordinator: !open.coordinator })} > setOpen({ ...closeAll, stats: !open.stats })} > } > {children} ); }; export default MoreTooltip;