@material-ui/core#Divider TypeScript Examples

Footer = () => {
  return (
    <footer>
      <Slide in={true} direction='up' timeout={3000}>
        <div className='FooterSection'>
          <Divider variant='middle'></Divider>
          <div className='FooterContainer'>
            <div className='FooterItemContainer'>
              <CopyrightIcon color='secondary' fontSize='small' />
              <Typography color='textSecondary' variant='body2'>
                hellomuthu23
              </Typography>
            </div>

            <Divider orientation='vertical' flexItem></Divider>
            <div className='FooterItemContainer'>
              <Typography color='textSecondary' variant='body2'>
                Feedback: [email protected]
              </Typography>
            </div>

            <Divider orientation='vertical' flexItem></Divider>
            <Link href='https://github.com/hellomuthu23/planning-poker/issues'>
              Submit an Issue
            </Link>
          </div>
        </div>
      </Slide>
    </footer>
  );
}

Content = () => {
	const { orderID } = useParams<{ orderID?: string }>()
	const theme = useTheme();
	const matches = useMediaQuery(theme.breakpoints.down("sm"));

	if (matches) {
		if (orderID) {
			return (
				<NavigationView>
					<ContentView>
						<Detail orderID={orderID} />
					</ContentView>
				</NavigationView>
			)
		}

		return (
			<NavigationView>
				<ListView height="100%">
					<List />
				</ListView>
			</NavigationView>
		)
	}

	return (
		<NavigationView>
			<ListView height="100%">
				<List />
			</ListView>
			<Divider orientation="vertical" flexItem />
			<ContentView>
				<Detail orderID={orderID} />
			</ContentView>
		</NavigationView>
	)
}

LatestBlock = (props: {block: BlockInfo}) => {

    return (
        <Card>
            <CardHeader title="Latest block"/>
            <CardContent>
                <Grid container alignItems="center">
                    <Grid item md={6} xs={12}>
                        <Typography variant="h6">Block number:</Typography>
                        <Typography variant="subtitle2">{props.block.number}</Typography>
                        <Divider light/>
                        <Box m={"0.5rem"}/>
                        <Typography variant="h6">Hash:</Typography>
                        <Typography variant="subtitle2">{props.block.hash}</Typography>
                    </Grid>
                </Grid>
            </CardContent>
        </Card>
    );
}

private _renderEntries() {
    return this.state.entries.map((entry, index) => {
      return (
        <React.Fragment key={`${entry.path}-fragment`}>
          {index ? <Divider /> : undefined}
          <ConflictItem service={this.props.service} file={entry} />
        </React.Fragment>
      );
    });
  }

Players = React.memo(({ players, host, czar, roomId, isCurrentUserHost }: PlayersProps) => {
  const [, , , kickPlayer] = useFetchData(`/api/rooms/kick`, FetchType.PUT);
  const onPlayerKick = useCallback((playerToKick: string) => {
    return kickPlayer({ roomId, clientId: playerToKick }).catch(() => { });
  }, [kickPlayer, roomId]);

  if (window.screen.width < 600) {
    return <>
      {players.sort((a, b) => b.score - a.score).map((player) => {
        const isHost = player._id === host;
        const isCzar = player?._id === czar;
        return <MobilePlayer key={player._id} player={player} isHost={isHost} isCzar={isCzar} onPlayerKick={onPlayerKick} isCurrentUserHost={isCurrentUserHost} />
      })}
    </>
  }

  return <List className="players-list">
    {players.map((player, index) => {
      const isHost = player._id === host;
      const isCzar = player?._id === czar;
      return <React.Fragment key={player._id}>
        <Player player={player} isHost={isHost} isCzar={isCzar} onPlayerKick={onPlayerKick} isCurrentUserHost={isCurrentUserHost} />
        {index !== players?.length - 1 ? <Divider variant="inset" component="li" /> : null}
      </React.Fragment>
    })}
  </List>;
})

SettingsPage = () => {
    const dispatch: AppDispatch = useDispatch();

    const [user, setUser] = useState<ValidateTokenResponse>();
    const { loading } = useSelector((state: RootState) => state.common);

    useEffect(() => {
        const getUserData = async () => {
            const userData: ValidateTokenResponse = await dispatch(getUser());

            setUser(userData);
        };

        getUserData();
    }, [dispatch]);

    return (
        <div>
            {user && (
                <List subheader={<ListSubheader>Settings</ListSubheader>}>
                    <SettingsSwitchAccount user={user} />
                    <SettingsNotifications />
                </List>
            )}
            {loading && !user && <CenteredCircularProgress />}
            <Divider />
            <SettingsFooter />
        </div>
    );
}

Custom404: NextPage = () => (
  <Layout>
    <Typography variant="h1">404</Typography>
    <Divider />
    <div>
      <Typography gutterBottom>We can’t seem to find a page you are looking for!</Typography>
      <Typography gutterBottom>
        You may have mistyped the address or the page may have moved.
      </Typography>
      <Typography gutterBottom>
        We’re sorry for the error and hope you’ll have a good day.
      </Typography>
    </div>
  </Layout>
)

function TurnContextPanel(props: { secondsLeft: number }) {
  const classes = useStyles()

  return (
    <Box mt={2}>
      <Grid
        container
        alignItems="center"
        direction="row"
        justify="center"
        spacing={2}
        className={classes.root}
      >
        <Grid item>
          <CardsLeftItem></CardsLeftItem>
        </Grid>
        <Divider orientation="vertical" flexItem />
        <Grid item>
          <CountdownTimerItem
            secondsLeft={props.secondsLeft}
          ></CountdownTimerItem>
        </Grid>
        <Divider orientation="vertical" flexItem />
        <Grid item>
          <ScoreCardItem></ScoreCardItem>
        </Grid>
      </Grid>
    </Box>
  )
}

AlertGroup = ({ alerts, status, title, icon }: AlertGroupProps) => {
  const classes = useStyles();
  return (
    <Box p={1}>
      {alerts.map((alert, index) => (
        <Fragment key={`alert-${status}-${index}`}>
          <ActionItemCard
            disableScroll
            alert={alert}
            avatar={
              <Tooltip title={title}>
                <Avatar className={classes.avatar}>{icon}</Avatar>
              </Tooltip>
            }
          />
          {index < alerts.length - 1 && <Divider />}
        </Fragment>
      ))}
    </Box>
  );
}

render() {
    const { classes, theme, ...dividerProps } = this.props;
    return (
      <Divider
        {...dividerProps}
        classes={{
          root: this.props.classes.divider,
        }}
      />
    );
  }

CardWithIcon: FC<Props> = props => {
    const { icon, title, subtitle, to, children } = props;
    const classes = useStyles(props);
    return (
        <Card className={classes.card}>
            <Link to={to}>
                <div className={classes.main}>
                    <Box width="3em" className="icon">
                        {createElement(icon, { fontSize: 'large' })}
                    </Box>
                    <Box textAlign="right">
                        <Typography
                            className={classes.title}
                            color="textSecondary"
                        >
                            {title}
                        </Typography>
                        <Typography variant="h5" component="h2">
                            {subtitle || ' '}
                        </Typography>
                    </Box>
                </div>
            </Link>
            {children && <Divider />}
            {children}
        </Card>
    );
}

DeleteConfirm = ({ open, close, yes }: Props) => {
  const matches = useMediaQuery("(max-width: 768px)");
  return (
    <Dialog open={open} onClose={close}>
      <DialogTitle>DELETE ITEM?</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Are you sure you want to delete this item?
        </DialogContentText>
        <div style={{ display: matches ? "none" : "block" }}>
          <Divider />
          <br />
          <DialogContentText>
            <span style={{ color: "green", fontWeight: "bold" }}>PROTIP:</span>
            <br />
            You can hold down shift when clicking the <b>delete button</b> to
            bypass this confirmation entirely
          </DialogContentText>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={close} color="primary">
          No
        </Button>
        <Button onClick={yes} color="primary" variant="contained">
          Yes
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export function ListItemTlObject({ node }: { node: ExtendedTlObject }) {
    return (
        <>
            <div style={{ padding: '16px 32px' }}>
                <MuiLink
                    component={Link}
                    to={`/${node.prefix}${node.type}/${node.name}`}
                >
                    <Typography variant="h5" color="textPrimary">
                        {node.prefix}
                        {node.name}
                    </Typography>
                </MuiLink>
                <Description description={node.description} />
            </div>
            <Divider />
        </>
    )
}

NetworkSides = () => {
  const classes = useStyles();
  const { sourceSubscriptions, targetSubscriptions } = useSubscriptionsContext();
  const { sourceChainDetails, targetChainDetails } = useSourceTarget();
  const { sourceReady, targetReady } = useLoadingApi();

  return (
    <Box marginY={2} className={classes.main}>
      <Box p={1} className={classes.statsEntry}>
        <div>
          <IconApiStatus className={classes.IconApiSvg} status={sourceReady} />
          <a target="_blank" rel="noreferrer" href={sourceChainDetails.polkadotjsUrl}>
            <Web3Icon>{sourceChainDetails.chain}</Web3Icon>
            {sourceChainDetails.chain}
          </a>
        </div>
        <span># {sourceSubscriptions.bestBlock}</span>
      </Box>
      <Divider />
      <ArrowDownwardIcon className={classes.arrowIcon} />
      <BridgedLocalWrapper blurred>
        <Box p={1} className={classes.statsEntry}>
          <div>
            <IconApiStatus className={classes.IconApiSvg} status={targetReady} />
            <a target="_blank" rel="noreferrer" href={targetChainDetails.polkadotjsUrl}>
              {targetChainDetails.chain}
            </a>
          </div>
          <span style={{ opacity: 0.4 }}># {targetSubscriptions.bestBlock}</span>
        </Box>
      </BridgedLocalWrapper>
    </Box>
  );
}

Bar = () => {
  const classes = useStyles()

  return (
    <Box style={{ width: 80 }}>
      <Divider
        classes={{ root: classes.divider }}
        // style={{ height: 3, margin: 10, color: "#000" }}
      />
    </Box>
  )
}

export function FriendLinks(props: ISectionProps): JSX.Element {
  const { t } = useTranslation();

  return (
    <>
      <SectionTitle ref={props.sections.friendLinks.ref}>{t('Preference.FriendLinks')}</SectionTitle>
      <Paper elevation={0}>
        <List dense disablePadding>
          <ListItem button onClick={async () => await window.service.native.open('https://github.com/webcatalog/webcatalog-engine')}>
            <ListItemText secondary={t('Preference.WebCatalogEngineIntro')} />
            <ChevronRightIcon color="action" />
          </ListItem>
          <Divider />
          <ListItem button onClick={async () => await window.service.native.open('https://webcatalogapp.com?utm_source=tidgi_app')}>
            <ListItemText primary={<Logo src={webcatalogLogo} alt={t('Preference.WebCatalog')} />} secondary={t('Preference.WebCatalogIntro')} />
            <ChevronRightIcon color="action" />
          </ListItem>
          <Divider />
          <ListItem button onClick={async () => await window.service.native.open('https://translatiumapp.com?utm_source=tidgi_app')}>
            <ListItemText primary={<Logo src={translatiumLogo} alt={t('Preference.Translatium')} />} secondary={t('Preference.TranslatiumIntro')} />
            <ChevronRightIcon color="action" />
          </ListItem>
        </List>
      </Paper>
    </>
  );
}

Questionnaire = (props: QuestionnaireProps) => {
    const classes = useStyles();
    const links = props.links.map((x) => {
        return (
            <Link key={x.title} onClick={x.onClick}>
                {x.title}
            </Link>
        );
    });

    return (
        <Container maxWidth="xs" className={classes.root}>
            <CssBaseline />
            <div className={classes.paper}>
                <Avatar className={classes.avatar}>{props.avatorIcon}</Avatar>
                <Typography variant="h4" className={classes.title}>
                    {props.title}
                </Typography>

                <div>{props.forms}</div>

                <Divider style={{ width: "50%" }} />
                <div style={{ display: "flex", flexDirection: "column" }}>{links}</div>

                <Divider style={{ width: "50%" }} />
                <Copyright />
            </div>
        </Container>
    );
}

CartDrawer: React.FC = () => {
    const classes = useStyles();
    const ploc = useCartPloc();
    const state = usePlocState(ploc);

    return (
        <Drawer
            anchor="right"
            open={state.open}
            className={classes.drawer}
            classes={{
                paper: classes.drawerPaper,
            }}>
            <Box className={classes.drawerHeader}>
                <IconButton onClick={() => ploc.closeCart()}>
                    <ChevronLeftIcon />
                </IconButton>
                <Box className={classes.drawerTitleContainer}>
                    <ShoppingCartIcon className={classes.drawerTitleIcon} />
                    <Typography variant="h6" component="h2">
                        Cart
                    </Typography>
                </Box>
            </Box>
            <Divider />
            <CartContent />
        </Drawer>
    );
}

ActionSheet = ({ url, text, onClose }: { url: string, text: string, onClose: () => void }) => {
	const [showSnackbar] = useSnackbar()
	return (
		<Paper>
			<Box>
				<Box padding={2}>
					<Typography variant="subtitle1">Share this page</Typography>
				</Box>
				<List>
					<ListItem button onClick={async () => {
						await navigator.clipboard.writeText(url)
						showSnackbar('success', 'Copied this page URL.')
						onClose()
					}}>
						<ListItemIcon>
							<AssignmentTurnedInIcon />
						</ListItemIcon>
						<ListItemText primary="Copy URL of this page" />
					</ListItem>
					<ListItem button onClick={() => {
						const encoded = encodeURI(url)
						const uri = `https://twitter.com/intent/tweet?text=${encoded}`
						if (!window.open(uri)) window.location.href = uri
						onClose()
					}}>
						<ListItemIcon>
							<TwitterIcon />
						</ListItemIcon>
						<ListItemText primary="Twitter" />
					</ListItem>
				</List>
				<Divider />
				<List>
					<ListItem button onClick={onClose}>
						<ListItemText primary="Cancel" />
					</ListItem>
				</List>
			</Box>
		</Paper>
	)
}

export default function NavDrawer({
  currentSection,
  currentTable,
  ...props
}: INavDrawerProps) {
  const classes = useStyles();

  const { sections } = useFiretableContext();

  return (
    <Drawer open {...props} classes={{ paper: classes.paper }}>
      <Grid
        container
        spacing={1}
        wrap="nowrap"
        alignItems="center"
        className={classes.logoRow}
      >
        <Grid item>
          <IconButton
            aria-label="Close navigation drawer"
            onClick={props.onClose as any}
          >
            <CloseIcon />
          </IconButton>
        </Grid>

        <Grid item className={classes.logo}>
          <FiretableLogo />
        </Grid>
      </Grid>

      <nav>
        <List>
          <li>
            <ListItem
              button
              classes={{ root: classes.listItem }}
              component={Link}
              to={routes.home}
            >
              <ListItemIcon className={classes.listItemIcon}>
                <HomeIcon />
              </ListItemIcon>
              <ListItemText
                primary="Home"
                classes={{ primary: classes.listItemText }}
              />
            </ListItem>
          </li>

          <Divider variant="middle" className={classes.divider} />

          {sections &&
            Object.entries(sections).map(([section, tables]) => (
              <NavDrawerItem
                key={section}
                section={section}
                tables={tables}
                currentSection={currentSection}
                currentTable={currentTable}
              />
            ))}
        </List>
      </nav>
    </Drawer>
  );
}

render() {
    const comments = this.props.commentsList.map((comment, index) => (
      <div key={index}>
        <Comment reviewComment={comment} file={this.props.file} />
        <Divider />
      </div>
    ));
    const reviewTimeStamp = timeAgo(
      new Date().getTime(),
      this.props.reviewRequest.timestamp
    );
    return (
      <List
        subheader={
          <Grid container direction="column" spacing={0}>
            <Grid container direction="row" spacing={0}>
              <Grid item style={style.reviewIcon}>
                <RateReviewIcon color="primary" />
              </Grid>
              <Grid item>
                <Typography
                  color="primary"
                  style={style.commentListHeader}
                  gutterBottom
                >
                  {'Review requested: ' + this.props.reviewRequest.description}
                </Typography>
              </Grid>
            </Grid>
            <Grid item>
              <Typography
                color="primary"
                style={style.commentListDescription}
                gutterBottom
              >
                {'Requested by: ' + this.props.reviewRequest.requester}
              </Typography>
            </Grid>
            <Grid item>
              <Typography color="primary" style={style.commentListDescription}>
                {'Opened ' + reviewTimeStamp}
              </Typography>
            </Grid>
          </Grid>
        }
      >
        {' '}
        {comments}{' '}
      </List>
    );
  }

function DeckSelector({ decks, onChange }: { decks: any[], onChange: (decks: string[]) => void }) {
  const [deckOptions, setDeckOptions] = useState<{ name: string; _id: string, value?: boolean }[]>([]);
  const [isExpanded, setIsExpanded] = useState(false);
  const [isAllSelected, setIsAllSelected] = useState(false);
  const toggleSelectAll = useCallback(() => {
    setDeckOptions(prevDeck => {
      prevDeck.forEach(deck => deck.value = !isAllSelected);
      return [...prevDeck];
    });

    setIsAllSelected(!isAllSelected);
  }, [isAllSelected])

  useEffect(() => {
    if (decks) {
      setDeckOptions(decks.map(deck => {
        return { value: deck.name.includes('Base'), ...deck }
      }));
    }
  }, [decks]);

  useEffect(() => {
    onChange(deckOptions.filter(deck => deck.value).map(deck => deck._id));
  }, [deckOptions, onChange]);


  function _onChange(e: React.ChangeEvent<HTMLInputElement>) {
    setDeckOptions(prevDeck => {
      const deck = prevDeck.find(deck => deck._id === e.target.name);
      if (deck) {
        deck.value = e.target.checked;
      }
      return [...prevDeck];
    });
  }

  if (!decks?.length) {
    return null;
  }

  return <ExpansionPanel expanded={isExpanded} onChange={() => { setIsExpanded(prev => !prev) }}>
    <ExpansionPanelSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1bh-content"
      id="panel1bh-header"
    >
      <Typography>Available Decks!</Typography>
    </ExpansionPanelSummary>
    <ExpansionPanelDetails>
      <FormControl required component="fieldset" error={!deckOptions.some(deck => deck.value)}>
        <FormControlLabel
          control={<Checkbox checked={isAllSelected} onChange={toggleSelectAll} name="Select all" />}
          label="Select all"
        />
        <Divider />
        <FormLabel component="legend">Select which decks you would like to play with</FormLabel>
        <FormGroup className="deck-checkbox-group">
          {deckOptions.map(deck => {
            return <FormControlLabel
              key={deck._id}
              control={<Checkbox checked={deck.value} onChange={_onChange} name={deck._id} />}
              label={deck.name}
            />
          })}
        </FormGroup>
        <FormHelperText>You must select at least one</FormHelperText>
      </FormControl>
    </ExpansionPanelDetails>
  </ExpansionPanel>
}

Settings: React.FC<SettingsProps> = props => {
    const {
        onClickBack,
        onClickQuit,
        onClickStartOnLoginSwitch,
        onClickAutoUpdateSwitch,
        openAboutApp,
        closeAboutApp,
        shouldStartOnLogin,
        autoUpdate,
        aboutAppVisible
    } = props

    return (
        <SettingsContainer>
            <SectionsContainer>
                <SectionsColumn>
                    <Box my={1} />
                    <Grid container direction="row" justify="center">
                        <Typography variant="h5">SpaceEye</Typography>
                    </Grid>
                    <Box my={1} />
                    <Grid container direction="row" justify="center">
                        <Button variant="outlined" color="primary" onClick={onClickBack}>
                            Back
                        </Button>
                    </Grid>
                    <Spacer />
                    <Grid container direction="column" justify="center" alignItems="center">
                        <Link
                            component="button"
                            variant="body2"
                            color="textSecondary"
                            onClick={openAboutApp}
                        >
                            About
                        </Link>
                        <Box my={0.5} />
                        <Button variant="outlined" color="secondary" onClick={onClickQuit}>
                            Quit
                        </Button>
                    </Grid>
                    <Box my={1} />
                </SectionsColumn>
            </SectionsContainer>
            <SettingsColumn>
                <Box my={2} />
                <Grid container direction="row" justify="center">
                    <Typography variant="h6">Settings</Typography>
                </Grid>
                <Box my={2} mx={1}>
                    <Divider variant="fullWidth" />
                </Box>
                <Grid container direction="column" justify="flex-start" alignContent="flex-start">
                    <SettingsSwitch
                        isChecked={shouldStartOnLogin}
                        onChange={onClickStartOnLoginSwitch}
                        label="Start on Login"
                    />
                    {/* Don't show auto-update option if downloaded from an app store */}
                    {!process.mas && !process.windowsStore && (
                        <SettingsSwitch
                            isChecked={autoUpdate}
                            onChange={onClickAutoUpdateSwitch}
                            label="Auto update"
                        />
                    )}
                </Grid>
            </SettingsColumn>
            <AboutThisApp onClickDone={closeAboutApp} visible={aboutAppVisible} />
        </SettingsContainer>
    )
}

TransactionInfiniteList: React.FC<TransactionListProps> = ({
  transactions,
  loadNextPage,
  pagination,
}) => {
  const classes = useStyles();
  const theme = useTheme();
  const isXsBreakpoint = useMediaQuery(theme.breakpoints.down("xs"));
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  const itemCount = pagination.hasNextPages ? transactions.length + 1 : transactions.length;

  const loadMoreItems = () => {
    return new Promise((resolve) => {
      return resolve(pagination.hasNextPages && loadNextPage(pagination.page + 1));
    });
  };

  const isRowLoaded = (params: Index) =>
    !pagination.hasNextPages || params.index < transactions.length;

  // @ts-ignore
  function rowRenderer({ key, index, style }) {
    const transaction = get(index, transactions);

    if (index < transactions.length) {
      return (
        <div key={key} style={style}>
          <TransactionItem transaction={transaction} />
          <Divider variant={isMobile ? "fullWidth" : "inset"} />
        </div>
      );
    }
  }

  return (
    <InfiniteLoader
      isRowLoaded={isRowLoaded}
      loadMoreRows={loadMoreItems}
      rowCount={itemCount}
      threshold={2}
    >
      {({ onRowsRendered, registerChild }) => (
        <div data-test="transaction-list" className={classes.transactionList}>
          <List
            rowCount={itemCount}
            ref={registerChild}
            onRowsRendered={onRowsRendered}
            height={isXsBreakpoint ? theme.spacing(74) : theme.spacing(88)}
            width={isXsBreakpoint ? theme.spacing(38) : theme.spacing(110)}
            rowHeight={isXsBreakpoint ? theme.spacing(28) : theme.spacing(16)}
            rowRenderer={rowRenderer}
          />
        </div>
      )}
    </InfiniteLoader>
  );
}

export default function Component(): ReactElement {
  const classes = useStyles();

  return (
    <footer className={classes.root}>
      <Divider />
      <Grid className={classes.grid} container>
        <Grid className={classes.listItem} item xs={12} sm={6} md={3}>
          <Copyright className={classes.icon} />
          <Typography component="span" variant="h6">
            Copyright 2020
          </Typography>
          <Typography variant="subtitle1" color="textSecondary">
            MindOrks Nextgen Private Limited
            <br />
            Gurgaon, Haryana, India
            <br />
          </Typography>
        </Grid>
        <Grid className={classes.listItem} item xs={12} sm={6} md={3}>
          <Typography component="p" variant="h6">
            Quick Links
          </Typography>
          <InternalLink link="/contact" name="Contact Us" />
          <br />
          <InternalLink link="/policies/privacy" name="Privacy Policy" />
          <br />
          <InternalLink link="/policies/terms-and-conditions" name="Terms And Conditions" />
          <br />
          <InternalLink link="/policies/cookie" name="Cookie Policy" />
          <br />
        </Grid>
        <Grid className={classes.listItem} item xs={12} sm={6} md={3}>
          <Typography component="p" variant="h6">
            About Us
          </Typography>
          <ExternalLink href="https://www.facebook.com/afteracademy" name="AfterAcademy" />
          <br />
          <ExternalLink href="https://www.facebook.com/mindorks.nextgen" name="MindOrks" />
          <br />
          <ExternalLink
            href="https://www.linkedin.com/in/amit-shekhar-iitbhu"
            name="Amit Shekhar"
          />
          <br />
          <ExternalLink href="https://www.linkedin.com/in/janishar-ali" name="Janishar Ali" />
        </Grid>
        <Grid className={classes.listItem} item xs={12} sm={6} md={3}>
          <Typography component="p" variant="h6">
            Free Resources
          </Typography>
          <ExternalLink href="https://blog.mindorks.com" name="Publication" />
          <br />
          <ExternalLink href="https://medium.com/mindorks" name="Medium" />
          <br />
          <ExternalLink href="https://www.youtube.com/mindorks" name="Video Lessons" />
          <br />
          <ExternalLink href="https://github.com/mindorksopensource" name="Mindorks Open Source" />
        </Grid>
      </Grid>
    </footer>
  );
}

Header = ({ user, nSites, classes }: HeaderProps) => (
  <>
    <Grid container justify="space-between">
      <Grid item>
        <Grid container direction="column">
          <Grid item>
            <Typography variant="subtitle2" color="textSecondary">
              Managed by
            </Typography>
          </Grid>
          <Grid item>
            <Typography variant="h5" color="textSecondary">
              {user.organization}
            </Typography>
          </Grid>
          <Grid item>
            <Grid container alignItems="center" spacing={1}>
              <Grid item>
                <Typography
                  className={classNames(classes.organization, classes.blueText)}
                >
                  {nSites}
                </Typography>
              </Grid>
              <Grid item>
                <Typography variant="h6" className={classes.grayText}>
                  Sites
                </Typography>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
      <Grid item>
        <Grid container direction="column">
          <Grid item>
            <Typography variant="subtitle1" color="textSecondary">
              {user.fullName}
            </Typography>
          </Grid>
          <Grid item>
            <Grid container alignItems="center">
              <Grid item>
                <EmailIcon className={classes.emailIcon} />
              </Grid>
              <Grid item>
                <Typography variant="caption" color="textSecondary">
                  {user.email}
                </Typography>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
    <Divider className={classes.divider} />
  </>
)

Stepper: React.FC<StepperProps> = ({
  activeStep: initialActiveStep,
  children,
  onChangeStep,
  steps,
  ...props
}) => {
  const styles = useStyles();
  const [activeStep, setActiveStep] = useState(
    steps.findIndex((step) => step.path === initialActiveStep),
  );

  useEffect(() => {
    if (onChangeStep != null) {
      onChangeStep(steps[activeStep]);
    }
  }, [activeStep, onChangeStep, steps]);

  const handleStep = (step: number) => () => {
    setActiveStep(step);
  };

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handlePrevious =
    (step = activeStep - 1) =>
    () => {
      if (step < activeStep && step >= 0) {
        setActiveStep(step);
      }
    };

  return (
    <>
      <MuiStepper
        alternativeLabel
        activeStep={activeStep}
        className={styles.root}
        orientation="horizontal"
        {...props}
      >
        {steps.map((step, i) => (
          <Step key={step.path}>
            <StepButton onClick={handleStep(i)}>{step.title}</StepButton>
          </Step>
        ))}
      </MuiStepper>
      <Divider />
      {children({ handleNext, handlePrevious })[activeStep]}
    </>
  );
}

AdrSearchResultListItem = ({
  lineClamp = 5,
  highlight,
  result,
}: {
  lineClamp?: number;
  highlight?: ResultHighlight;
  result: AdrDocument;
}) => {
  const classes = useStyles();

  return (
    <Link to={result.location}>
      <ListItem alignItems="flex-start" className={classes.flexContainer}>
        <ListItemText
          className={classes.itemText}
          primaryTypographyProps={{ variant: 'h6' }}
          primary={
            highlight?.fields.title ? (
              <HighlightedSearchResultText
                text={highlight.fields.title}
                preTag={highlight.preTag}
                postTag={highlight.postTag}
              />
            ) : (
              result.title
            )
          }
          secondary={
            <span
              style={{
                display: '-webkit-box',
                WebkitBoxOrient: 'vertical',
                WebkitLineClamp: lineClamp,
                overflow: 'hidden',
              }}
            >
              {highlight?.fields.text ? (
                <HighlightedSearchResultText
                  text={highlight.fields.text}
                  preTag={highlight.preTag}
                  postTag={highlight.postTag}
                />
              ) : (
                result.text
              )}
            </span>
          }
        />
        <Box>
          {result.status && (
            <Chip label={`Status: ${result.status}`} size="small" />
          )}
          {result.date && <Chip label={`Date: ${result.date}`} size="small" />}
        </Box>
      </ListItem>
      <Divider component="li" />
    </Link>
  );
}

withCustomMenu = (): StoryFnReactReturnType => {
    const avatar = <Avatar src={tRex} alt={'User Avatar'} />;
    const open = (): void => {
        store.set({ open: true });
    };
    const close = (): void => {
        store.set({ open: false });
    };

    const menu = (state: any): JSX.Element => (
        <Menu open={state.open} onClose={close}>
            <div key={'header'} style={{ position: 'relative', padding: 10 }}>
                <Typography variant={'h6'}>Welcome, </Typography>
                <Typography style={{ fontWeight: 600, marginTop: '-10px' }} variant={'h3'}>
                    T-Rex
                </Typography>
                <div
                    style={{
                        position: 'absolute',
                        right: 0,
                        top: 0,
                        height: '100%',
                        width: '100%',
                        opacity: 0.2,
                        backgroundSize: 'cover',
                        backgroundImage: `url(${tRex})`,
                    }}
                />
            </div>
            <Divider key={'divider-1'} />
            <MenuItem onClick={close} key={'account'}>
                My Account
            </MenuItem>
            <MenuItem onClick={close} key={'logout'}>
                Logout
            </MenuItem>
            <Divider key={'divider-2'} />
            <img
                key={'footer'}
                alt={'tRex'}
                style={{ textAlign: 'center', padding: '12px 16px 0 16px', height: 40 }}
                src={EatonLogo}
            />
        </Menu>
    );

    store.set({ open: false });

    return (
        <State store={store}>
            {(state): JSX.Element => <UserMenu avatar={avatar} onOpen={open} menu={menu(state)} />}
        </State>
    );
}