@mui/material#Button TypeScript Examples

WifiDeviceNotification: FunctionComponent<WifiDeviceNotificationProps> = (
  props
) => {
  const { newNetworkDevices, removeDeviceFromNewList, onDeviceChange } = props;
  const { appStatus } = useAppState();

  return (
    <>
      {appStatus === AppStatus.Interactive &&
        newNetworkDevices.map((dnsDevice) => {
          const handleClose = () => {
            removeDeviceFromNewList(dnsDevice.name);
          };

          return (
            <Snackbar
              key={dnsDevice.name}
              open
              autoHideDuration={6000}
              onClose={handleClose}
            >
              <Alert onClose={handleClose} severity="info">
                New Device {dnsDevice.name} ({dnsDevice.ip})
                <Button
                  size="small"
                  onClick={() => {
                    onDeviceChange(dnsDevice);
                    removeDeviceFromNewList(dnsDevice.name);
                  }}
                >
                  Select
                </Button>
              </Alert>
            </Snackbar>
          );
        })}
    </>
  );
}

export function SampleExtraActions({ selectionController }: {
    selectionController: SelectionController
}) {

    const snackbarContext = useSnackbarController();
    const { selectedEntities } = selectionController;

    const onClick = (event: React.MouseEvent) => {
        const count = selectedEntities ? selectedEntities.length : 0;
        snackbarContext.open({
            type: "success",
            message: `User defined code here! ${count} products selected`
        });
    };
    return (
        <Button onClick={onClick} color="primary">
            Extra action
        </Button>
    );

}

ConfirmationModal = (props: {
    title: string;
    open: boolean;
    onClose?: () => void;
    onConfirm?: () => void;
    disabled?: boolean;
}) => {

    return (
        <Modal
            open={props.open}
            onClose={() => !props.disabled ? props.onClose() : ''}
            className={commonStyles.center}
            blurSelector="#root"
        >
            <div className={styles.ConfirmationModal}>
                <p className={styles.text}>{props.title}</p>
                <div className={styles.actions}>
                    <Button
                        role="button"
                        variant="outlined"
                        color="primary"
                        onClick={props.onClose}
                        className={styles.actionBtn}
                        disabled={props.disabled}
                    >Cancel</Button>
                    <Button
                        role="button"
                        variant="contained"
                        color="primary"
                        onClick={props.onConfirm}
                        className={styles.actionBtn}
                        disabled={props.disabled}
                    >Ok</Button>
                </div>
            </div>
        </Modal>
    )
}

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>
  )
}

LogsView: FunctionComponent = () => {
  const onLogs = () => {
    ipcRenderer.send(IpcRequest.OpenLogsFolder);
  };
  return (
    <MainLayout>
      <Card>
        <CardTitle icon={<ListIcon />} title="Logs" />
        <Divider />
        <CardContent>
          <Button
            color="primary"
            size="large"
            variant="contained"
            onClick={onLogs}
          >
            Open logs folder
          </Button>
        </CardContent>
      </Card>
    </MainLayout>
  );
}

CookiesDialog: React.FunctionComponent<Props> = (props) => {
  const { onAgreeClick } = props;
  const [open, setOpen] = React.useState(false);

  const handleAgreeClick = () => {
    setOpen(false);
    onAgreeClick();
  };

  return (
    <>
      <Button variant="outlined" onClick={() => setOpen(true)}>
        Learn more about our cookies
      </Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>About cookies</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Any information that you voluntarily provide to us, including your
            name and email address, will be used for the sole purpose for which
            the information was provided to us. In addition, communication
            exchanges on this website are public (not private) communications.
            Therefore, any message that you post on this website will be
            considered and treated as available for public use and distribution.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button color="primary" onClick={handleAgreeClick}>
            Agree
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

export default function GroupDeleteModal({ show, onClose, groupToDelete }) {
    const confirmDeleteGroup = () => {
        deleteGroup({ groupID: groupToDelete.id })
            .then((res) => {
                onClose();
            })
            .catch((err) => {
                toast.error(err);
            });
    };

    return (
        <Dialog open={show} onClose={onClose}>
            <DialogTitle>Delete Group</DialogTitle>
            <DialogContent>
                <DialogContentText>
                    {groupToDelete ? <span>Are you sure you want to delete group {groupToDelete.name}</span> : null}
                </DialogContentText>
            </DialogContent>
            <DialogActions>
                <Button color="primary" onClick={onClose}>
                    No
                </Button>
                <Button color="error" onClick={confirmDeleteGroup}>
                    Yes pls
                </Button>
            </DialogActions>
        </Dialog>
    );
}

export default function LoadingButton({
  loading,
  disabled,
  children,
  ...other
}: LoadingButtonProps) {
  return (
    // eslint-disable-next-line react/jsx-props-no-spreading
    <Button disabled={loading || disabled} {...other}>
      <div className={s.root}>
        {loading && <CircularProgress className={s.loading} size={16} />}
        <div>{children}</div>
      </div>
    </Button>
  );
}

function HiddenButton() {
  const { setHidden, hidden: hiddenEnabled } = useModControls();
  const handleClick = useCallback(() => setHidden(!hiddenEnabled), [hiddenEnabled, setHidden]);

  return (
    <Button onFocus={ignoreFocus} onClick={handleClick} sx={{ px: 0 }}>
      <img
        src={modHiddenImg}
        alt={"ModHidden"}
        style={{ filter: `grayscale(${hiddenEnabled ? "0%" : "100%"})`, width: "60%" }}
      />
    </Button>
  );
}

export default function CallNotificationIncoming(props: {
	caller?: string,
	onDecline?: VoidFunction,
	onAccept?: VoidFunction,
	loading?: boolean
}) {
	return (
		<Paper sx={{
			padding: 2,
			width: 400,
			boxSizing: "border-box"
		}} elevation={3}>
			<Stack direction="column" alignItems="stretch" spacing={2}>
				<Typography>Incoming FaceTime call from {props.caller}</Typography>
				<Stack direction="row" spacing={2}>
					<Button sx={{flexBasis: 0, flexGrow: 1}} variant="contained" color="error" disabled={props.loading} onClick={props.onDecline}>Decline</Button>
					<Button sx={{flexBasis: 0, flexGrow: 1}} variant="contained" color="success" disabled={props.loading} onClick={props.onAccept}>Accept</Button>
				</Stack>
			</Stack>
		</Paper>
	);
}

Layout: React.FC = () => {

  const messageHandler = React.useContext(messageChannelContext);
  const [, dispatch] = useStore();

  return <Box>
    <Box sx={{ height: 50, mb: 4, display: 'flex', gap: 1 }}>
      <LogoutButton />
      <AuthButton />
      <Box sx={{ display: 'flex', gap: 1, height: 36 }}>
        <Button variant="contained" startIcon={<Folder />} onClick={() => messageHandler?.openFolder('content')}>Open Output Directory</Button>
        <Button variant="contained" startIcon={<ClearAll />} onClick={() => dispatch({ type: 'queue', payload: [], extraInfo: { force: true } })}>Clear Queue</Button>
      </Box>
      <AddToQueue />
    </Box>
    <MainFrame />
  </Box>;
}

function CustomContainedButton(props: CustomContainedButtonProps) {
  const theme = useTheme();
  // const styles = useStyles();

  return (
    <Button
      variant="contained"
      href={props.href}
      disableElevation
      endIcon={props.endIcon}
      style={{
        padding: "12px 32px",
        backgroundColor: `${theme.palette.secondary.main}`,
        color: "#ffffff",
        textTransform: "capitalize",
        fontWeight: "bold",
        borderRadius: "10rem",
      }}
    >
      {props.label}
    </Button>
  );
}

StyledButton = styled(Button)<{ disableGradient?: boolean }>`
  padding: 7px 20px;
  border-radius: 5px;
  color: ${({ theme }) => theme.text.textColorLight};
  text-decoration: none;

  &:first-child {
    color: ${({ theme }) => theme.text.textColorLight};
    margin-right: 0;

    ${({ disableGradient, theme }) =>
      !disableGradient
        ? `
      margin-right: 15px;
        color: ${theme.text.textColorExtremelyLight};
        background: linear-gradient(
          153deg,
          ${theme.accent.accentColor} 0%,
          ${theme.accent.accentColorLight} 100%
        );

        background-size: 400% 400;
        transition: 0.2s ease-in-out;
        `
        : null}
  }

  &:hover {
    background-position: 100% 50%;
  }
`

export default function Index() {
  const [values, setValues] = useState<FormProps>()
  const onSubmit = (data: FormProps) => {
    setValues(data)
  }
  let defaultValues: FormProps = { hallo: '' }
  return (
    <Box sx={{
      maxWidth: 300,
      margin: '30px auto 0 auto'
    }}>
      <FormContainer defaultValues={defaultValues} onSuccess={onSubmit}>
        <Stack direction={'column'}>
          <TextFieldElement name={'hallo'} label={'hallo'} /> <br />
          <TextFieldElement color={'primary'} name={'primary'} label={'Primary'} /><br />
          <TextFieldElement color={'secondary'} name={'secondary'} label={'Secondary'} />
          <br />
          <Button type={'submit'} variant={'contained'} color={'primary'}>Submit</Button>
        </Stack>
      </FormContainer>
      <div>
        Data:<br />
        {JSON.stringify(values)}
      </div>
    </Box>
  )
}

function SimpleConditionalSelector({ conditional, disabled }: SimpleConditionalSelectorProps) {
  const { character, characterDispatch, data } = useContext(DataContext)
  const setConditional = useCallback((v?: string) => {
    const conditionalValues = deepClone(character.conditional)
    if (v) {
      layeredAssignment(conditionalValues, conditional.path, v)
    } else {
      deletePropPath(conditionalValues, conditional.path)
    }
    characterDispatch({ conditional: conditionalValues })
  }, [conditional, character, characterDispatch])

  const conditionalValue = data.get(conditional.value).value
  const [stateKey, st] = Object.entries(conditional.states)[0]
  const badge = getStateBadge(st.name)
  const condName = getCondName(conditional.name)

  return <Button fullWidth size="small" sx={{ borderRadius: 0 }} color={conditionalValue ? "success" : "primary"} onClick={() => setConditional(conditionalValue ? undefined : stateKey)} disabled={disabled} startIcon={conditionalValue ? <CheckBox /> : <CheckBoxOutlineBlank />}>
    {condName} {badge}
  </Button>
}

export function SampleProductsView({ entity, modifiedValues }: {
    entity?: Entity<Product>;
    modifiedValues?: EntityValues<Product>;
}) {

    const snackbarContext = useSnackbarController();

    const onClick = (event: React.MouseEvent) => {
        snackbarContext.open({
            type: "success",
            message: `Custom action for ${modifiedValues?.name}`
        });
    };

    const values = modifiedValues ? modifiedValues : {};

    return (
        <Box
            display="flex"
            width={"100%"}
            height={"100%"}>

            <Box m="auto"
                 display="flex"
                 flexDirection={"column"}
                 alignItems={"center"}
                 justifyItems={"center"}>

                <Box p={4}>
                    <p>
                        This is an example of a custom view added
                        as a panel to an entity schema.
                    </p>
                    <p>
                        Values in the form:
                    </p>

                    {values && <p style={{
                        color: "#fff",
                        padding: "8px",
                        fontSize: ".85em",
                        fontFamily: "monospace",
                        borderRadius: "4px",
                        backgroundColor: "#4e482f"
                    }}>
                        {JSON.stringify(values, null, 2)}
                    </p>}


                </Box>

                <Button onClick={onClick} color="primary">
                    Your action
                </Button>

            </Box>
        </Box>
    );

}

export function SettingsPage(props) {
    const classes = useStyles();
    const [isLoading, setIsLoading] = useState(false);

    const exportData = async () => {
        if (isLoading) return;
        setIsLoading(true);
        const client = getGraphQLClient();

        try {
            const data = await client?.query({
                query: gql`
                    query pluginNewsletterExport {
                        pluginNewsletterExport {
                            email
                        }
                    }
                `,
            });
            const newsletters: NewsletterForm[] | undefined = data?.data?.pluginNewsletterExport;
            if (newsletters) {
                downloadFile('newsletter_export.csv', newsletters.map(n => n.email).join('\n'));
            }
        } catch (e) {
            console.error('Newsletter::exportData error: ', e)
        }
        setIsLoading(false);
    }

    return (
        <PluginSettingsLayout {...props} disableSave>
            <p>Export all subscribed emails into CSV file</p>
            <Button variant="contained" color="primary"
                className={classes.saveBtn}
                disabled={isLoading}
                onClick={exportData}>Export data</Button>
            <LoadingStatus isActive={isLoading} />
        </PluginSettingsLayout>
    )
}

export default function StatsDialog({ open, onClose }: Props) {
  const stats = useStats()

  return (
    <Dialog open={open} onClose={onClose} fullWidth maxWidth="xs">
      <DialogTitle>
        Stats
      </DialogTitle>
      <List dense>
        <ListItem sx={{ px: 3 }} >
          <ListItemText 
            primary="Namespaces"
            secondary={stats.namespaces}
          />
        </ListItem>
        <ListItem sx={{ px: 3 }} >
          <ListItemText 
            primary="Natives"
            secondary={stats.natives}
          />
        </ListItem>
        <ListItem sx={{ px: 3 }} >
          <ListItemText 
            primary="Comments"
            secondary={stats.comments}
          />
        </ListItem>
        <ListItem sx={{ px: 3 }} >
          <ListItemText 
            primary="Known names"
            secondary={`${stats.knownNames.confirmed} (${stats.knownNames.total})`}
          />
        </ListItem>
      </List>
      <DialogActions>
        <Button onClick={onClose}>Close</Button>
      </DialogActions>
    </Dialog>
  )
}

WifiDeviceSelect: FunctionComponent<WifiDeviceSelectProps> = (props) => {
  const { wifiDevices, onChange } = props;

  const wifiDevicesSorted = useMemo(() => {
    return wifiDevices.sort((a, b) => {
      if (a.target === b.target) {
        return a.name > b.name ? 1 : -1;
      }
      return a.target > b.target ? 1 : -1;
    });
  }, [wifiDevices]);

  return (
    <Box sx={styles.root}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Target</TableCell>
            <TableCell>Version</TableCell>
            <TableCell>Type</TableCell>
            <TableCell>DNS</TableCell>
            <TableCell>IP</TableCell>
            <TableCell />
          </TableRow>
        </TableHead>
        <TableBody>
          {wifiDevicesSorted.map((row) => (
            <TableRow key={row.name}>
              <TableCell>{row.name}</TableCell>
              <TableCell>
                {row.deviceName ? row.deviceName : row.target}
              </TableCell>
              <TableCell>{row.version}</TableCell>
              <TableCell>{row.type?.toUpperCase()}</TableCell>
              <TableCell>
                <a target="_blank" href={`http://${row.dns}`} rel="noreferrer">
                  {row.dns}
                </a>
              </TableCell>
              <TableCell>
                <a target="_blank" href={`http://${row.ip}`} rel="noreferrer">
                  {row.ip}
                </a>
              </TableCell>
              <TableCell>
                <Button
                  onClick={() => {
                    onChange(row);
                  }}
                >
                  Select
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Box>
  );
}

FinanceDialogueBody: React.FC<IFinanceDialogueBody> = ({spawncode, price, setDialogueOpen, setModalOpen}) => {
    const [downpay, setDownpay] = useState(20)
    const [colour, setColour] = useState<RgbColor>({r: 0, g: 0, b:0})
    const {setVisible} = useVisibility()
    const coloursEnabled = useRecoilValue(GlobalState.customColours)

    const handleClose = () => {
        setDialogueOpen(false)
    }

    const handleAccept = async () => {
        setDialogueOpen(false)
        setModalOpen(false)

        try {
            await fetchNui<void>("finance_vehicle", {
                vehicle: spawncode,
                downpayPercent: downpay,
                colour: coloursEnabled ? colour : null
            })
            await fetchNui("exit")
            setVisible(false)
        } catch (e) {
            console.error(e)
        }
    }

    const calculateDownpayment = () => {
        const total = parseFloat(price.slice(1).replace(/,/g, ''))

        return Math.round(total * (downpay / 100))
    }

    const onSliderChange = (e: any) => {
        setDownpay(e.target.value)
    }

    return (
        <>
            <DialogTitle>Confirm your finance options</DialogTitle>
            <DialogContent>
                <DialogContentText>
                    Downpayment: ${calculateDownpayment()}.00 <br/>
                    Interest Rate: {interestRates[downpay]}%
                </DialogContentText>

                <br/>
                <Slider
                    defaultValue={downpay}
                    marks={[
                        {value: 10, label: "10%"},
                        {value: 20, label: "20%"},
                        {value: 30, label: "30%"},
                        {value: 40, label: "40%"},
                    ]}
                    min={10}
                    max={40}
                    step={10}
                    getAriaValueText={(value) => value + "%"}
                    onChange={onSliderChange}
                />

                {coloursEnabled &&
                <DialogContentText>
                    <br />
                    Pick a colour, any colour:
                    <RgbColorPicker color={colour} onChange={setColour} />
                </DialogContentText>
                }

            </DialogContent>
            <DialogActions>
                <Button color="success" variant="outlined" onClick={handleAccept}>Confirm</Button>
                <Button color="error" variant="outlined" onClick={handleClose}>Cancel</Button>
            </DialogActions>
        </>
    )
}

export default function PurchaseDetails({ group, transaction }) {
    const [showPositions, setShowPositions] = useState(false);

    return (
        <>
            <MobilePaper>
                <TransactionActions groupID={group.id} transaction={transaction} />
                <Divider sx={{ marginBottom: 1, marginTop: 1 }} />
                <Grid container>
                    <Grid item xs={12} md={transaction.is_wip || transaction.files.length > 0 ? 6 : 12}>
                        <TransactionDescription group={group} transaction={transaction} />
                        <TransactionBilledAt group={group} transaction={transaction} />

                        <TransactionCreditorShare
                            group={group}
                            transaction={transaction}
                            isEditing={transaction.is_wip}
                            label="Paid by"
                        />

                        <TransactionValue group={group} transaction={transaction} />
                    </Grid>

                    {(transaction.is_wip || transaction.files.length > 0) && (
                        <Grid item xs={12} md={6} sx={{ marginTop: { xs: 1 } }}>
                            <FileGallery transaction={transaction} />
                        </Grid>
                    )}
                    <Grid item xs={12}>
                        {transaction.is_wip ? (
                            <PurchaseDebitorShares
                                group={group}
                                transaction={transaction}
                                showPositions={showPositions}
                            />
                        ) : (
                            <PurchaseDebitorSharesReadOnly group={group} transaction={transaction} />
                        )}
                    </Grid>
                </Grid>
            </MobilePaper>

            {!showPositions &&
            transaction.is_wip &&
            transaction.positions.find((item) => !item.deleted) === undefined ? (
                <Grid container justifyContent="center" sx={{ marginTop: 2 }}>
                    <Button startIcon={<Add />} onClick={() => setShowPositions(true)}>
                        Add Positions
                    </Button>
                </Grid>
            ) : (showPositions && transaction.is_wip) ||
              transaction.positions.find((item) => !item.deleted) !== undefined ? (
                <TransactionPositions group={group} transaction={transaction} />
            ) : (
                <></>
            )}
        </>
    );
}

export default function SourceOptions({
    sourceFilter,
    updateFilterValue,
    resetFilterValue,
    setTriggerUpdate,
    setSearch,
    update,
}: IFilters1) {
    const [FilterOptions, setFilterOptions] = React.useState(false);

    function handleReset() {
        resetFilterValue(0);
        setFilterOptions(false);
    }

    function handleSubmit() {
        setTriggerUpdate(0);
        setSearch(true);
        setFilterOptions(false);
    }

    return (
        <>
            <Fab
                sx={{ position: 'fixed', bottom: '2em', right: '3em' }}
                onClick={() => setFilterOptions(!FilterOptions)}
                variant="extended"
                color="primary"
            >
                <FilterListIcon />
                Filter
            </Fab>

            <Drawer
                anchor="bottom"
                open={FilterOptions}
                onClose={() => setFilterOptions(false)}
                PaperProps={{
                    style: {
                        maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
                    },
                }}
            >
                <Box sx={{ display: 'flex' }}>
                    <Button
                        onClick={handleReset}
                    >
                        Reset
                    </Button>
                    <Button
                        sx={{ marginLeft: 'auto' }}
                        variant="contained"
                        onClick={handleSubmit}
                    >
                        Submit
                    </Button>
                </Box>
                <Options
                    sourceFilter={sourceFilter}
                    updateFilterValue={updateFilterValue}
                    group={undefined}
                    update={update}
                />
            </Drawer>
        </>
    );
}

export default function DeleteUser() {
  const dispatch = useAppDispatch();
  const accounts = useSelector(selectAccounts);
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [beingDeleted, setBeingDeleted] = useState<string | null>(null);

  const askDelete = useCallback((id: string) => {
    setBeingDeleted(id);
    setOpen(true);
  }, []);

  const doDelete = useCallback(async () => {
    if (!beingDeleted) {
      return;
    }
    setLoading(true);
    await dispatch(deleteUser({ id: beingDeleted }));
    setLoading(false);
    setOpen(false);
  }, [beingDeleted, dispatch]);

  return (
    <div>
      <Dialog
        title="Are you sure you want to delete this user?"
        onClose={() => setOpen(false)}
        open={open}>
        This will delete every data of this user, including its history. There is no way to retrieve
        its data afterward.
        <div className={s.button}>
          <LoadingButton loading={loading} onClick={doDelete} color="error" variant="contained">
            Delete permanently
          </LoadingButton>
        </div>
      </Dialog>
      {accounts.map((user) => (
        <SettingLine
          key={user.id}
          left={user.username}
          right={<Button onClick={() => askDelete(user.id)}>Delete</Button>}
        />
      ))}
    </div>
  );
}

// TODO: Maybe tell which file is actually missing
export function SetupScreen() {
  // TODO: Add a guess for directory path
  const [directoryPath, setDirectoryPath] = useState<string | null>(null);
  const [saveEnabled, setSaveEnabled] = useState(false);

  const [updateOsuDirectory, updateState] = useUpdateOsuDirectoryMutation();
  const [showErrorMessage, setShowErrorMessage] = useState(false);

  const handleConfirmClick = useCallback(() => {
    if (directoryPath) {
      updateOsuDirectory({ osuStablePath: directoryPath });
    }
  }, [updateOsuDirectory, directoryPath]);

  useEffect(() => {
    if (updateState.isSuccess) {
      window.api.reboot();
    } else if (updateState.isError) {
      setShowErrorMessage(true);
    }
  }, [updateState, setShowErrorMessage]);

  const handleOnDirectoryChange = useCallback(
    (path: string | null) => {
      setDirectoryPath(path);
      setShowErrorMessage(false);
    },
    [setShowErrorMessage],
  );

  // Makes sure that the button is only clickable when it's allowed.
  useEffect(() => {
    setSaveEnabled(directoryPath !== null && !updateState.isLoading);
  }, [directoryPath, updateState.isLoading]);

  return (
    <Box
      sx={{
        height: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Paper elevation={1}>
        <Stack gap={2} sx={{ px: 6, py: 4 }}>
          <RewindLogo />
          {showErrorMessage && (
            <>
              <Alert severity="error">
                <div>Does not look a valid osu! directory!</div>
              </Alert>
            </>
          )}
          <DirectorySelection
            value={directoryPath}
            onChange={handleOnDirectoryChange}
            placeHolder={"Select your osu! directory"}
            badgeOnEmpty={true}
          />
          <Stack direction={"row-reverse"} gap={2}>
            <Button variant={"contained"} startIcon={<Loop />} disabled={!saveEnabled} onClick={handleConfirmClick}>
              Save & Restart
            </Button>
            <Button variant={"text"} onClick={() => window.open(setupWikiUrl)} startIcon={<Help />}>
              Help
            </Button>
          </Stack>
        </Stack>
      </Paper>
    </Box>
  );
}

export default function Onboarding() {
	return (
		<div className={styles.root}>
			<div style={{padding: 16}}>
				<AirMessageLogo />
			</div>

			<div className={styles.content}>
				<div>
					<Typography variant="h4">Use iMessage on any computer with AirMessage</Typography>
					<div className={styles.columnContainer}>
						<div className={styles.column} style={{marginRight: 24}}>
							<div className={styles.instruction}>
								<img src={iconMac} className={styles.instructionIcon} alt="" />
								<div className={styles.instructionText} style={{top: 0}}>
									<Typography variant="h5" gutterBottom>1. Set up your server</Typography>
									<Typography variant="body1" color="textSecondary" gutterBottom>A server installed on a Mac computer is required to route your messages for you.</Typography>
									<Typography variant="body1" color="textSecondary">Visit <a href="https://airmessage.org" style={{color: "#008EFF"}}>airmessage.org</a> on a Mac computer to download.</Typography>
								</div>
							</div>

							<div className={styles.instruction} style={{marginTop: 24}}>
								<img src={iconAirMessage} className={styles.instructionIcon} alt="" />
								<div className={styles.instructionText} style={{top: 0}}>
									<Typography variant="h5" gutterBottom>2. Connect your account</Typography>
									<Typography variant="body1" color="textSecondary">Sign in with your account to get your messages on this device.</Typography>
								</div>
							</div>
						</div>

						<div className={styles.column} style={{marginLeft: 24, flexGrow: 1}}>
							<Typography variant="subtitle1" gutterBottom>Select a sign-in method:</Typography>
							<Button
								className={styles.buttonGoogle}
								sx={{marginTop: 1, color: "black"}}
								variant="contained"
								startIcon={<img src={iconGoogle} alt="" />}
								onClick={signInGoogle}
								fullWidth>Sign in with Google</Button>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}

function ContextMenu<T extends HTMLElement, >(props: ContextMenuProps<T>) {
  const [anchor, setAnchor] = React.useState( { x: 0, y: 0 } );
  
  const [show, setShow] = React.useState(false);

  React.useEffect(() => {
    const { popupItem: ref } = props;
    if (ref.current === null)
      return;
    const listener = (ev: MouseEvent) => {
      ev.preventDefault();
      setAnchor({ x: ev.x + 10, y: ev.y + 10 });
      setShow(true);
    }
    ref.current.addEventListener('contextmenu', listener);

    return () => { 
      if (ref.current)
        ref.current.removeEventListener('contextmenu', listener)
    };
  }, [ props.popupItem ])

  return show ? <Box sx={{ zIndex: 9999, p: 1, background: 'rgba(0, 0, 0, 0.75)', backdropFilter: 'blur(5px)', position: 'fixed', left: anchor.x, top: anchor.y }}>
    <List sx={{ p: 0, m: 0 }}>
      {props.options.map((item, i) => {
        return item === 'divider' ? <Divider key={`ContextMenu_Divider_${i}_${item}`}/> : 
        <Button color='inherit' key={`ContextMenu_Value_${i}_${item}`} onClick={() => {
          item.onClick();
          setShow(false);
        }} sx={buttonSx}>
          {item.text}
        </Button>
      })}
      <Divider />
      <Button fullWidth color='inherit' onClick={() => setShow(false)} sx={buttonSx} >
        Close
      </Button>
    </List>
  </Box> : <></>
}

export default function PackagesUsed(params: Props) {
  return (
    <Grid
      container
      direction="column"
      justifyContent="center"
      alignItems="center"
      spacing={1}
      style={{
        height: "80%",
        width: "100%",
      }}
    >
      {params.packages.length === 0 && (
        <Grid item>
          <img
            src="/no_packages.svg"
            alt="No Packages Used"
            style={{
              height: "30vh",
            }}
          />
        </Grid>
      )}
      {params.packages.length === 0 && (
        <Grid item>
          <Typography>No Packages Used</Typography>
        </Grid>
      )}

      {params.packages.map((packageName) => (
        <Grid item key={packageName}>
          <a
            href={packageName}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              color: "transparent",
            }}
          >
            <Button
              style={{
                textTransform: "none",
              }}
            >
              <Link
                fontSize="small"
                style={{
                  marginRight: "8px",
                }}
              />
              {packageName.split("/").pop()?.toLowerCase()}
              <img
                src={`https://img.shields.io/pub/v/${packageName
                  .split("/")
                  .pop()}.svg`}
                alt={packageName}
                style={{
                  marginLeft: "8px",
                }}
              />
            </Button>
          </a>
        </Grid>
      ))}
    </Grid>
  );
}

UserFormSubmit = styled(Button)(({theme}) => ({
  margin: theme.spacing(3, 0, 2),
}))

ReadMoreButton = styled(Button)`
  color: ${({ theme }) => theme.text.textColor};
  padding: 5px 10px;
  border-radius: 3px;
`