@mui/material#Tooltip TypeScript Examples

/**
 * Generic error view. Displayed for example when an unexpected value comes
 * from the datasource in a collection view.
 * @param error
 * @param tooltip
 * @constructor
 * @category Components
 */
export function ErrorView({
                              error,
                              tooltip
                          }: ErrorViewProps): React.ReactElement {
    const classes = useStyles();
    const body = (
        <div
            className={clsx(classes.flexCenter, classes.smallMargin)}>
            <ErrorIcon fontSize={"small"} color={"error"}/>
            <div className={classes.text}>{error}</div>
        </div>
    );

    if (tooltip) {
        return (
            <Tooltip title={tooltip}>
                {body}
            </Tooltip>
        );
    }
    return body;
}

DeleteSelectedButton = (props: PropsType<PropsType, {
    onClick: () => void;
    style?: React.CSSProperties;
    totalElements?: number | null;
}, ReturnType<typeof mapStateToProps>>) => {
    const enabled = countSelectedItems(props.totalElements) > 0;
    return (
        <div style={props.style}>
            <Tooltip title="Delete selected">
                <span>
                    <IconButton
                        className={styles.iconButton}
                        disabled={!enabled}
                        onClick={props.onClick}
                        aria-label="Delete selected"
                    >
                        <DeleteIcon />
                    </IconButton>
                </span>
            </Tooltip>
        </div>
    );
}

function AppBarAction({ text, desktopIcon, buttonProps }: AppBarActionProps) {
  if (!desktopIcon) {
    return (
      <Button {...buttonProps} color="inherit">
        {text}
      </Button>
    )
  }

  return (
    <Tooltip title={text}>
      <IconButton
        aria-label={text}
        {...buttonProps}
        color="inherit"
      >
        {React.createElement(desktopIcon)}
      </IconButton>
    </Tooltip>
  )
}

export default function AccountClearingListEntry({ group, account, accountID }) {
    const balances = useRecoilValue(accountBalances(group.id));

    return (
        <ListItemLink to={`/groups/${group.id}/accounts/${account.id}`}>
            <ListItemAvatar sx={{ minWidth: { xs: "40px", md: "56px" } }}>
                <Tooltip title="Clearing Account">
                    <ClearingAccountIcon color="primary" />
                </Tooltip>
            </ListItemAvatar>
            <ListItemText
                primary={
                    <Typography variant="body1" component="span">
                        {account.name}
                    </Typography>
                }
                secondary={account.description}
            />
            <ListItemText>
                <Typography align="right" variant="body2">
                    <Typography
                        component="span"
                        sx={{
                            color: (theme) => balanceColor(balances[account.id].clearingResolution[accountID], theme),
                        }}
                    >
                        {balances[account.id].clearingResolution[accountID].toFixed(2)} {group.currency_symbol}
                    </Typography>
                    <br />
                    <Typography component="span" sx={{ typography: "body2", color: "text.secondary" }}>
                        last changed: {DateTime.fromISO(account.last_changed).toLocaleString(DateTime.DATETIME_FULL)}
                    </Typography>
                </Typography>
            </ListItemText>
        </ListItemLink>
    );
}

export default function DesktopSideBar({ navBarItems }: IProps) {
    const location = useLocation();
    const theme = useTheme();

    const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
        if (location.pathname === path) return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="large" />;
        return <IconComponent sx={{ color: (theme.palette.mode === 'dark') ? 'grey.A400' : 'grey.600' }} fontSize="large" />;
    };

    return (
        <SideNavBarContainer>
            {
                // eslint-disable-next-line react/destructuring-assignment
                navBarItems.map(({
                    path, title, IconComponent, SelectedIconComponent,
                }: NavbarItem) => (
                    <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
                        <ListItem disableRipple button key={title}>
                            <ListItemIcon sx={{ minWidth: '0' }}>
                                <Tooltip placement="right" title={title}>
                                    {iconFor(path, IconComponent, SelectedIconComponent)}
                                </Tooltip>
                            </ListItemIcon>
                        </ListItem>
                    </Link>
                ))
            }
        </SideNavBarContainer>
    );
}

render() {
    const { x, y, payload, artists } = this.props;

    const artist = artists[payload.index];

    if (!artist) {
      return null;
    }

    return (
      <Link to={`/artist/${artist.id}`}>
        <Tooltip title={artist.name}>
          <g transform={`translate(${x - svgImgSize / 2},${y})`}>
            <clipPath id="yoyo">
              <circle r={svgImgSize / 2} cx={svgImgSize / 2} cy={svgImgSize / 2} />
            </clipPath>
            <image
              width={svgImgSize}
              height={svgImgSize}
              href={getImage(artist)}
              clipPath="url(#yoyo)"
            />
          </g>
        </Tooltip>
      </Link>
    );
  }

export function BaseAudioSettingsPanel(props: BaseAudioSettingsPanelProps) {
  const { master, effects, music, onMasterChange, onEffectsChange, onMusicChange, onMutedChange } = props;
  return (
    <Stack
      sx={{
        p: 2,
      }}
      gap={1}
    >
      <Box>
        <Typography id="input-slider" gutterBottom>
          Master Volume
        </Typography>
        <VolumeSlider onChange={onMasterChange} value={master} />
      </Box>

      <Box>
        <Typography id="input-slider" gutterBottom>
          Music Volume
        </Typography>
        <VolumeSlider onChange={onMusicChange} value={music} />
      </Box>
      <Box>
        <Typography id="input-slider" gutterBottom>
          Effects Volume
        </Typography>
        <Tooltip title={"Hit sounds coming soon!"}>
          {/*https://mui.com/components/tooltips/#disabled-elements*/}
          <span>
            <VolumeSlider disabled={true} onChange={onEffectsChange} value={effects} />
          </span>
        </Tooltip>
      </Box>
    </Stack>
  );
}

export default function QueuedAttachment(props: {children: React.ReactNode, queueData: QueuedAttachmentProps}) {
	return (
		<div className={styles.container}>
			<Tooltip title={props.queueData.file.name}>
				<div className={styles.subcontainer}>
					{props.children}
					<IconButton size="small" className={styles.close} onClick={props.queueData.onRemove}><BorderedCloseIcon /></IconButton>
				</div>
			</Tooltip>
		</div>
	);
}

export function Popover({ className, content, children, ...props }: Props) {
  return (
    <Tooltip
      classes={{
        popper: classNames(`${CLASS_NAME}__popper`, className),
        tooltip: `${CLASS_NAME} ${CLASS_NAME}__content`,
        arrow: `${CLASS_NAME}__arrow`,
      }}
      {...props}
      arrow
      title={<div className={`${CLASS_NAME}__inner-content`}>{content}</div>}
    >
      <PopoverChildren>{children}</PopoverChildren>
    </Tooltip>
  );
}

BootstrapTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} arrow classes={{ popper: className }} />
))(({ theme }) => ({
  [`& .${tooltipClasses.arrow}`]: {
    color: theme.palette.common.black,
  },
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: theme.palette.common.black,
    maxWidth: 500,
  },
}))

BoxIconButton = ({
  classes,
  children,
  variant = "outlined",
  tooltip,
  ...rest
}: IBoxIconButton) => {
  const button = (
    <IconButton
      {...rest}
      className={clsx(classes.root, {
        [classes.contained]: variant === "contained",
      })}
    >
      {children}
    </IconButton>
  );

  if (tooltip && tooltip !== "") {
    return (
      <Tooltip title={tooltip}>
        <span>{button}</span>
      </Tooltip>
    );
  }

  return button;
}

function NodeError({ error }: NodeErrorProps) {
  return (
    <Tooltip title={error.message}>
      <span
        style={{
          display: 'inline-flex',
          flexDirection: 'row',
          alignItems: 'center',
          padding: 8,
          background: 'red',
          color: 'white',
        }}
      >
        <ErrorIcon color="inherit" style={{ marginRight: 8 }} /> Error
      </span>
    </Tooltip>
  );
}

ParsedComponent: React.FC<{ component: TextComponent, runCommand?: (it: string) => void, suggest?: (it: string) => void }> =
  ({ component: it, runCommand, suggest }) => {
    let className: string | undefined
    const style: any = { }
    if (it.bold) style.fontWeight = 'bold'
    if (it.italic) style.fontStyle = 'italic'
    if (it.underlined) style.textDecoration = 'underline'
    if (it.strikethrough) style.textDecoration = (style.textDecoration ? style.textDecoration + ' ' : '') + 'line-through'
    let color = it.color
    if (typeof color === 'string') color = parseStringColor(color)
    if (color?.name && color.name in colorsMap) {
      style.color = colors[colorsMap[color.name]]
      if (color.name === 'white' || color.name === 'black') className = color.name
    } else if (color?.color) style.color = `rgba(${color.color.r},${color.color.g},${color.color.b},${color.color.alpha})`
    if (style.color && !(color?.name === 'white' || color?.name === 'black')) style.textShadow = 'none'
    if (it.clickEvent) style.cursor = 'pointer'
    let content: any
    if (it.translate) {
      if (it.translate in minecraft) {
        let i = 0
        const arr = it.with || []
        content = minecraft[it.translate].split('%').map((str, j) => {
          let comp: any
          if (j) {
            if (str[0] === 's') {
              comp = arr[i++]
              str = str.slice(1)
            } else {
              const id = parseInt(str)
              if (id > 0) {
                comp = arr[id - 1]
                str = str.slice(id.toString().length + 2)
              }
            }
          }
          return <>{comp && parseStringOrComponent(comp)}{str}</>
        })
      } else content = it.text ? parseMessage(it.text) : it.translate
    } else if (it.text) content = parseMessage(it.text)
    let elm = <span
      style={style}
      className={className}
      onClick={it.clickEvent
        ? () => {
            const value = it.clickEvent!.value
            switch (it.clickEvent!.action) {
              case 'OPEN_URL': return window.open(value, '_blank')
              case 'RUN_COMMAND': return runCommand && runCommand(value.slice(1))
              case 'SUGGEST_COMMAND': return suggest && suggest(value.slice(1))
            }
          }
        : undefined
      }
    >{content}{it.extra && parseComponents(it.extra, runCommand, suggest)}</span>
    if (it.hoverEvent?.action === 'SHOW_TEXT' && it.hoverEvent.contents.value) {
      elm = <Tooltip title={<>{parseComponents(it.hoverEvent.contents.value, runCommand, suggest)}</>}>{elm}</Tooltip>
    }
    return it.clickEvent?.action === 'COPY_TO_CLIPBOARD' ? <CopyToClipboard text={it.clickEvent!.value}>{elm}</CopyToClipboard> : elm
  }

export default function InfoRequestBottomAppBar() {
  return (
    <Toolbar
      sx={{
        background: 'white',
        borderTop: '1px solid lightgrey',
        display: 'flex',
        justifyContent: 'space-between',
        height: '72px',
      }}>
      <Box sx={{ height: '64px', display: 'flex', alignItems: 'start', pt: 1 }}>
        <Typography>Всички заявки за контакт</Typography>
      </Box>
      <Box sx={{ height: '64px', display: 'flex', alignItems: 'flex-end', pb: 1 }}>
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <Tooltip title="Преглед">
            <EventNoteIcon sx={iconStyles} fontSize="medium" color="action" />
          </Tooltip>
          <Tooltip title="Запази">
            <SaveIcon sx={iconStyles} fontSize="medium" color="action" />
          </Tooltip>
          <Tooltip title="Принт">
            <PrintIcon sx={iconStyles} fontSize="medium" color="action" />
          </Tooltip>
          <Tooltip title="Сподели">
            <ShareIcon sx={iconStyles} fontSize="medium" color="action" />
          </Tooltip>
          <Tooltip title="Добави">
            <AddIcon sx={addIconStyles} fontSize="large" />
          </Tooltip>
        </Box>
      </Box>
    </Toolbar>
  )
}

export function CopyToClipboard({ value }: ICopyToClipboardProps) {
	const [copied, setCopied] = useState<boolean | null>(null)
	const copyHandler = useCallback(async () => {
		try {
			await navigator.clipboard.writeText(value)
			setCopied(true)
		} catch {
			setCopied(false)
		}
	}, [value])

	return <Tooltip title="Copy To Clipboard" placement="top">
		<IconButton
			color={copied === true ? "success" : (copied === false ? "warning" : "default")}
			onClick={copyHandler}
		>
			<Icon icon={copied === true ? faCheck : (copied === false ? faTimes : faCopy)}/>
		</IconButton>
	</Tooltip>
}

export function ConnectedStatus({ state }: IConnectedStatusProps) {
	const {environment} = useContext(EnvironmentContext)
	return (
		<Stack direction="row" alignItems="center" spacing={2}>
			<Tooltip title="SDK Connection Environment" placement="bottom">
				<Chip
					size="small"
					color="info"
					label={getEnvironmentName(environment)}
					sx={{
						lineHeight: 1.1,
						height: "20px",
						fontSize: "0.8125rem"
					}}
				/>
			</Tooltip>
			<Box sx={{ display: "inline" }}>
				<Typography variant="subtitle1" >Connected </Typography>
				<Typography variant="subtitle2">
					<Address address={state.connection.address}/>
				</Typography>
			</Box>
			<IconButton
				color="inherit"
				title="Disconnect"
				onClick={state.disconnect}
			>
				<Icon icon={faLinkSlash}/>
			</IconButton>
		</Stack>
	)
}

function BaseHex(props: { value: string; styling: string; label?: string }) {
    const [tip_message, set_tip] = React.useState(null as null | string);
    const code = React.useRef<HTMLDivElement>(null);
    const theme = useTheme();
    const copy = () => {
        navigator.clipboard.writeText(props.value);
        set_tip('Copied!');
        setTimeout(() => {
            set_tip(null);
        }, 1000);
    };

    React.useEffect(() => {
        code.current?.addEventListener('dblclick', copy);
    });
    return (
        <Tooltip
            title={tip_message ?? 'double click to copy.'}
            arrow
            placement="top"
        >
            <div>
                <TextField
                    ref={code}
                    fullWidth
                    label={props.label}
                    value={props.value}
                    variant="outlined"
                    InputProps={{
                        readOnly: true,
                    }}
                />
            </div>
        </Tooltip>
    );
}

Semaphore = (props: SemaphoreProps) => {
    const value = props.impact * props.likelihood;
    const impactIndex = colors.length - props.impact;
    const likelihoodIndex = props.likelihood - 1;
    const color = colors[impactIndex][likelihoodIndex];
    return (
        <Tooltip
            title={`Impact (${props.impact}) * Likelihood (${props.likelihood}) = ${value}`}
        >
            <FiberManualRecordIcon htmlColor={color} />
        </Tooltip>
    );
}

/**
 * @category Preview components
 */
export function ImagePreview({ size, url }: ImagePreviewProps) {

    const [onHover, setOnHover] = useState(false);

    const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
    const classes = useStyles({ imageSize });

    if (size === "tiny") {
        return (
            <img src={url}
                 key={"tiny_image_preview_" + url}
                 className={classes.imageTiny}/>
        );
    }

    const imageStyle: CSSProperties =
        {
            maxWidth: "100%",
            maxHeight: "100%",
            borderRadius: "4px"
        };

    return (
        <div
            className={classes.imageWrap}
            key={"image_preview_" + url}
            onMouseEnter={() => setOnHover(true)}
            onMouseMove={() => setOnHover(true)}
            onMouseLeave={() => setOnHover(false)}>

            <img src={url}
                 className={classes.image}
                 style={imageStyle}/>

            {onHover && (
                <>
                    <Tooltip title="Copy url to clipboard">
                        <div className={classes.copyIcon}>
                            <IconButton
                                size={"small"}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    navigator.clipboard.writeText(url);
                                }}>
                                <ContentPasteIcon htmlColor={"#666"} fontSize={"small"} />
                            </IconButton>
                        </div>
                    </Tooltip>
                    <Tooltip title="Open image in new tab">
                        <a
                            className={classes.previewIcon}
                            href={url}
                            rel="noopener noreferrer"
                            target="_blank">
                            <IconButton
                                size={"small"}
                                onClick={(e) => e.stopPropagation()}>
                                <OpenInNewIcon htmlColor={"#666"} fontSize={"small"} />
                            </IconButton>
                        </a>
                    </Tooltip>
                </>
            )}
        </div>

    );
}

export function SettingsPage(props: TPluginSettingsProps<TMainMenuSettings>) {
    const classes = useStyles();
    const forceUpdate = useForceUpdate();
    const [canReorder, setCanReorder] = useState(false);

    const onSave = () => {
        getRestApiClient().purgeRendererEntireCache();
    }

    return (
        <PluginSettingsLayout<TMainMenuSettings> {...props} onSave={onSave}>
            {({ pluginSettings, changeSetting }) => {
                const items = pluginSettings?.items;

                if (items) {
                    for (const item of items) {
                        if (!item.id) item.id = getRandStr(12);
                    }
                }

                const updateItems = (items: TMainMenuItem[]) => {
                    if (pluginSettings) pluginSettings.items = items;
                }

                return (
                    <>
                        <div onClick={() => setCanReorder(!canReorder)}
                            style={{ display: 'flex', alignItems: 'center' }}>
                            {canReorder ? (
                                <Tooltip title="Apply order">
                                    <IconButton><DoneIcon /></IconButton>
                                </Tooltip>
                            ) : (
                                <Tooltip title="Edit order">
                                    <IconButton><ReorderIcon /></IconButton>
                                </Tooltip>
                            )}
                        </div>
                        <div className={classes.itemList}>
                            {canReorder && items?.length && (
                                <DraggableList data={items}
                                    component={Item}
                                    onChange={updateItems}
                                    itemProps={{
                                        items,
                                        canReorder,
                                        refreshList: forceUpdate,
                                    }}
                                />
                            )}
                            {!canReorder && items?.map((data) => {
                                return <Item data={data}
                                    key={data.id}
                                    itemProps={{
                                        items,
                                        canReorder,
                                        refreshList: forceUpdate,
                                    }} />
                            })}
                        </div>
                        <div style={{ padding: '5px 10px' }}>
                            <div className={`${classes.card} PluginMainMenu-paper`}>
                                <MenuItem
                                    className={classes.addBtn}
                                    onClick={() => changeSetting('items',
                                        [...(items ?? []), {
                                            title: '',
                                            id: getRandStr(12),
                                        }]
                                    )}>
                                    <AddIcon />
                                </MenuItem>
                            </div>
                        </div>
                    </>
                )
            }}
        </PluginSettingsLayout>
    )
}

AddButton = (props: AddButtonProps) => {
    const router = useRouter();
    const theme = useTheme();
    const matches = useMediaQuery(theme.breakpoints.down('md'));

    const redirectTo = () => {
        router.push(props.path || '#');
    };

    // Change position of button to the left side if it's the edit history button
    const leftOrRight = props.editHistory ? { left: { lg: 32, xs: 12 } } : { right: { lg: 32, xs: 12 } };

    return (
        <Tooltip
            title={
                props.editHistory ? 'Show Edit History' : `${props.edit ? 'Edit' : 'Add'} ${props.label || 'resource'}`
            }
        >
            <Fab
                variant={props.editHistory ? 'extended' : 'circular'}
                size={matches ? 'small' : 'large'}
                color={props.editHistory ? 'primary' : props.color || 'default'}
                aria-label={props.editHistory ? 'edit history' : props.edit ? 'edit' : 'add'}
                onClick={redirectTo}
                sx={{
                    display: 'flex',
                    margin: props.editHistory ? '12px auto' : 'auto',
                    position: 'fixed',
                    bottom: { lg: 32, xs: 12 },
                    zIndex: (theme) => theme.zIndex.appBar + 1,
                    color: (theme) => theme.palette.common.white,
                    ...leftOrRight,
                }}
            >
                {props.editHistory ? (
                    <AccessTimeRoundedIcon sx={{ marginRight: 1 }} width="16" />
                ) : props.edit ? (
                    <EditIcon width="16" />
                ) : (
                    <AddIcon htmlColor="white" width="16" />
                )}
                {props.editHistory ? 'Show Edit History' : null}
            </Fab>
        </Tooltip>
    );
}

VehCard: React.FC<Car> = ({
    name,
    brand,
    description,
    brandLogo,
    image,
    price,
    category,
    spawncode,
    trunkspace,
    performance
}) => {
    const theme = useTheme();
    const [open, setOpen] = useState(false)
    const testDrive = async () => {
        await fetchNui("test_drive", {vehicle: spawncode})
    }

    // Functions
    const handleOpen = () => setOpen(true)
    const handleClose = () => setOpen(false)

    return (
        <Card sx={{
            boxShadow: theme.shadows[3],
            margin: theme.spacing(2)
        }} variant="outlined">
            <CardHeader
                avatar={<img height={40} style={{maxWidth: 100, maxHeight: 40}} src={brandLogo} alt={brand}/>}
                title={name}
                subheader={category}
            />
            <CardMedia style={{height: "150px"}} image={image}/>
            <CardActions>
                <Tooltip TransitionComponent={Zoom} sx={{maxWidth: 120}} arrow title="Test drive this vehicle">
                    <Button
                        size="small"
                        variant={theme.palette.mode === "dark" ? "contained" : "outlined"}
                        color="primary"
                        startIcon={<DirectionsCarIcon/>}
                        onClick={testDrive}
                        disableElevation
                    >
                        TEST DRIVE
                    </Button>
                </Tooltip>
                <Tooltip TransitionComponent={Zoom} arrow sx={{maxWidth: 120}}
                         title="View more information about this vehicle">
                    <Button
                        size="small"
                        variant={theme.palette.mode === "dark" ? "contained" : "outlined"}
                        color="primary"
                        startIcon={<AssignmentIcon/>}
                        onClick={handleOpen}
                        disableElevation
                    >
                        MORE INFO
                    </Button>
                </Tooltip>
                <Modal
                    open={open}
                    onClose={handleClose}
                >
                    {<ModalBody
                        name={name}
                        brand={brand}
                        description={description}
                        price={price}
                        trunkspace={trunkspace}
                        setOpen={setOpen}
                        performance={performance}
                        spawncode={spawncode}
                    />}
                </Modal>
            </CardActions>
        </Card>
    )
}

export default function AccountTransactionListEntry({ group, transaction, accountID }) {
    return (
        <ListItemLink to={`/groups/${group.id}/transactions/${transaction.id}`}>
            <ListItemAvatar sx={{ minWidth: { xs: "40px", md: "56px" } }}>
                {transaction.type === "purchase" ? (
                    <Tooltip title="Purchase">
                        <PurchaseIcon color="primary" />
                    </Tooltip>
                ) : transaction.type === "transfer" ? (
                    <Tooltip title="Money Transfer">
                        <TransferIcon color="primary" />
                    </Tooltip>
                ) : (
                    <Tooltip title="Unknown Transaction Type">
                        <HelpOutline color="primary" />
                    </Tooltip>
                )}
            </ListItemAvatar>
            <ListItemText
                primary={
                    <>
                        {transaction.is_wip && (
                            <Chip color="info" variant="outlined" label="WIP" size="small" sx={{ mr: 3 }} />
                        )}
                        <Typography variant="body1" component="span">
                            {transaction.description}
                        </Typography>
                    </>
                }
                secondary={DateTime.fromISO(transaction.billed_at).toLocaleString(DateTime.DATE_FULL)}
            />
            <ListItemText>
                <Typography align="right" variant="body2">
                    <Typography
                        component="span"
                        sx={{ color: (theme) => balanceColor(transaction.account_balances[accountID].total, theme) }}
                    >
                        {transaction.account_balances[accountID].total.toFixed(2)} {group.currency_symbol}
                    </Typography>
                    <br />
                    <Typography component="span" sx={{ typography: "body2", color: "text.secondary" }}>
                        last changed:{" "}
                        {DateTime.fromISO(transaction.last_changed).toLocaleString(DateTime.DATETIME_FULL)}
                    </Typography>
                </Typography>
            </ListItemText>
        </ListItemLink>
    );
}

export function LeftMenuSidebar() {
  // const LinkBehavior = React.forwardRef((props, ref) => <Link ref={ref} to="/" {...props} role={undefined} />);
  const dispatch = useAppDispatch();
  const pathname = useAppSelector((state) => state.router.location.pathname);

  const handleLinkClick = (to: string) => () => dispatch(push(to));
  const buttonColor = (name: string) => (name === pathname ? "primary" : "default");
  const updateState = useCheckForUpdate();

  return (
    <Stack
      sx={{
        width: (theme) => theme.spacing(10),
        paddingBottom: 2,
      }}
      gap={1}
      p={1}
      alignItems={"center"}
      component={"nav"}
    >
      <Box onClick={handleLinkClick("/home")} sx={{ cursor: "pointer" }}>
        <RewindLogo />
      </Box>
      <Divider orientation={"horizontal"} sx={{ borderWidth: 1, width: "80%" }} />
      <Tooltip title={"Overview"} placement={"right"}>
        <IconButton color={buttonColor("/home")} onClick={handleLinkClick("/home")}>
          <Home />
        </IconButton>
      </Tooltip>
      <Tooltip title={"Analyzer"} placement={"right"}>
        <IconButton
          // These are not centered
          onClick={handleLinkClick("/analyzer")}
          color={buttonColor("/analyzer")}
        >
          <FaMicroscope height={"0.75em"} />
        </IconButton>
      </Tooltip>
      {/*Nothing*/}
      <Box flexGrow={1} />
      {updateState.hasNewUpdate && (
        <Tooltip title={`New version ${updateState.latestVersion} available!`} placement={"right"}>
          <IconButton onClick={() => window.open(latestReleaseUrl)}>
            <Badge variant={"dot"} color={"error"}>
              <UpdateIcon />
            </Badge>
          </IconButton>
        </Tooltip>
      )}
    </Stack>
  );
}

function SelectionChip(props: {selection: SelectionData, label: string, tooltip?: string, onDelete: () => void, className?: string}) {
	const chip = <Chip className={props.className} label={props.label} avatar={<Avatar src={props.selection.avatar} alt={props.selection.name} />} onDelete={props.onDelete} />;
	return !props.tooltip ? chip : <Tooltip title={props.tooltip}>{chip}</Tooltip>;
}

AutocompleteWrapper = ({
  classes,
  id,
  name,
  onChange,
  options,
  label,
  tooltip = "",
  value,
  disabled = false,
}: SelectProps) => {
  const [internalValue, setInternalValue] = useState<selectorTypes>(options[0]);

  const executeOnSelect = (_: any, selectedValue: any) => {
    if (selectedValue) {
      onChange(selectedValue.value);
      setInternalValue(selectedValue);
    }
  };

  return (
    <React.Fragment>
      <Grid item xs={12} className={classes.fieldContainer}>
        {label !== "" && (
          <InputLabel htmlFor={id} className={classes.inputLabel}>
            <span>{label}</span>
            {tooltip !== "" && (
              <div className={classes.tooltipContainer}>
                <Tooltip title={tooltip} placement="top-start">
                  <div className={classes.tooltip}>
                    <HelpIcon />
                  </div>
                </Tooltip>
              </div>
            )}
          </InputLabel>
        )}
        <FormControl fullWidth>
          <Autocomplete
            id={id}
            options={options}
            getOptionLabel={(option) => option.label}
            isOptionEqualToValue={(option) => option.value === value}
            disabled={disabled}
            renderInput={(params) => <InputField {...params} name={name} />}
            value={internalValue}
            onChange={executeOnSelect}
            autoHighlight
          />
        </FormControl>
      </Grid>
    </React.Fragment>
  );
}

ErrorTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: theme.palette.error.dark,
  },
}))

Players: React.FC<{ players?: CurrentStatus['players'] }> = React.memo(({ players }) => {
  const his = useHistory()
  const plugin = usePlugin()
  const globalData = useGlobalData()
  const [page, setPage] = useState(1)
  const [id, update] = useState(0)
  return <Card>
    <CardHeader title={lang.dashboard.onlinePlayers} />
    <Divider />
    <CardContent>
      {players?.length === 0
        ? <Empty />
        : <>
        <List sx={{ paddingTop: 0 }}>
          {players
            ? players.slice((page - 1) * 8, page * 8).map(p => {
              const name = typeof p === 'string' ? p : p.name
              return <Tooltip key={name} title={'IP: ' + ((p as any).ip || lang.unknown)}>
                <ListItem
                  secondaryAction={<>
                    <IconButton
                      edge='end'
                      size='small'
                      onClick={() => dialog(lang.dashboard.confirmKick(<span className='bold'>{name}</span>), lang.reason)
                        .then(it => it != null && plugin.emit('dashboard:kick', (res: boolean) => {
                          action(res)
                          if (!players) return
                          players.splice(players.indexOf(it!), 1)
                          update(id + 1)
                        }, name, it || null))
                      }
                    ><ExitToApp /></IconButton>
                    <IconButton edge='end' onClick={() => his.push('/NekoMaid/playerList/' + name)} size='small'><MoreHoriz /></IconButton>
                  </>
                  }
                >
                  <ListItemAvatar>
                    <Avatar
                      src={getSkin(globalData, name, true)}
                      imgProps={{ crossOrigin: 'anonymous', onClick () { his.push('/NekoMaid/playerList/' + name) }, style: { width: 40, height: 40 } }}
                      sx={{ cursor: 'pointer' }}
                      variant='rounded'
                    />
                  </ListItemAvatar>
                  <ListItemText primary={name} />
                </ListItem>
              </Tooltip>
            })
            : <LoadingList />
          }
        </List>
        {players && <Pagination
          page={page}
          onChange={(_, it) => setPage(it)}
          count={Math.max(Math.ceil(players.length / 8), 1)}
          sx={{ display: 'flex', justifyContent: 'flex-end' }}
        />}
      </>}
    </CardContent>
  </Card>
})

export default function GridActions({ modalStore, id, name, editLink }: Props) {
  const { t } = useTranslation('admin')
  const { showDetails, showDelete, setSelectedRecord } = modalStore

  function detailsClickHandler() {
    setSelectedRecord({ id, name })
    showDetails()
  }

  function deleteClickHandler() {
    setSelectedRecord({ id, name })
    showDelete()
  }

  return (
    <>
      <Tooltip title={t('cta:view') || ''}>
        <IconButton size="small" color="primary" onClick={detailsClickHandler}>
          <ImportExportIcon />
        </IconButton>
      </Tooltip>
      {editLink ? (
        <Link href={editLink} passHref>
          <Tooltip title={t('cta:edit') || ''}>
            <IconButton size="small" color="primary">
              <EditIcon />
            </IconButton>
          </Tooltip>
        </Link>
      ) : (
        ''
      )}
      <Tooltip title={t('cta:delete') || ''}>
        <IconButton size="small" color="primary" onClick={deleteClickHandler}>
          <DeleteIcon />
        </IconButton>
      </Tooltip>
    </>
  )
}