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;