@material-ui/core#Card TypeScript Examples

function Movie({ id, name, age_limit, ticket, bookMovie }: MovieProps) {
  const classes = useStyles();

  return (
    <Card className={classes.root} variant="outlined">
      <CardContent>
        <Typography className={classes.title} color="textSecondary" gutterBottom>
          {name}
        </Typography>
        <Typography className={classes.pos} color="textSecondary">
          age limit: {age_limit}
        </Typography>
      </CardContent>
      {
        ticket !== undefined
          ? (
            <CardActions>
              <Button size="small">Already Book</Button>
            </CardActions>
          )
          : (
            <CardActions onClick={() => bookMovie(id)}>
              <Button size="small">Reservation</Button>
            </CardActions>
          )
      }
    </Card>
  );
}

function GitHubGistWidget(props: WidgetArgs) {
  const classes = useStyles(props);
  const { t } = useTranslation();
  const [url, setURL] = useState<string>("");

  const setGistURL = useCallback(
    (url: string) => {
      try {
        const location = new URL(url);
        if (location.host !== "gist.github.com") {
          return;
        } else {
          props.setAttributes({
            url: location.origin + location.pathname,
          });
        }
      } catch (error) {}
    },
    [props]
  );

  if (props.attributes["url"]) {
    return (
      <Box className={"preview github-gist"} style={{ whiteSpace: "normal" }}>
        <Gist url={props.attributes["url"]}></Gist>
        {!props.isPreview && (
          <Box className={clsx(classes.actionButtonsGroup)}>
            <IconButton onClick={() => props.removeSelf()}>
              <TrashCanOutline></TrashCanOutline>
            </IconButton>
          </Box>
        )}
      </Box>
    );
  }

  if (props.isPreview) {
    return null;
  }

  return (
    <Card elevation={2} className={clsx(classes.card)}>
      <Typography variant={"h5"}>
        {t("widget/crossnote.github_gist/title")}
      </Typography>
      <TextField
        label={t("widget/crossnote/github_gist/enter-github-gist-url")}
        placeholder={"https://gist.github.com/..."}
        value={url}
        onChange={(event) => setURL(event.target.value)}
        fullWidth={true}
        onKeyUp={(event) => {
          if (event.which === 13) {
            setGistURL(url);
          }
        }}
      ></TextField>
      <Box className={clsx(classes.actionButtonsGroup)}>
        <Tooltip title={t("general/Delete")}>
          <IconButton onClick={() => props.removeSelf()}>
            <TrashCan></TrashCan>
          </IconButton>
        </Tooltip>
      </Box>
    </Card>
  );
}

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

MainCard: React.FC<MainCardProps> = ({ title, actions, children }) => {
    const classes = useStyles();

    return (
        <Card className={classes.card}>
            <Typography className={classes.title} variant="h5" style={{ display: 'flex', alignItems: 'center' }}>
                <Box flexGrow={1}>
                    {title}
                </Box>

                {actions}
            </Typography>
            <CardContent>
                {children}
            </CardContent>
        </Card>
    );
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
          <Centered>
              <Card>
                  <CardHeader title="Signup For Our Newsletter" />
                  <CardContent>
                      <SubscribeForm />
                  </CardContent>
              </Card>
          </Centered>
      </header>
    </div>
  )
}

OnCallForScheduleCard = ({ schedule }: { schedule: Schedule }) => {
    const title = (
        <div style={{ display: "flex" }}>
            <Tooltip title={schedule.enabled ? 'Enabled' : 'Disabled'}>
                <div>{schedule.enabled ? <StatusOK /> : <StatusAborted />}</div>
            </Tooltip>
            {schedule.ownerTeam.name}
        </div>
    );

    return (
        <Card>
            <CardHeader title={title} titleTypographyProps={{ variant: 'h6' }} />
            <CardContent>
                <OnCallForScheduleList schedule={schedule} />
            </CardContent>
        </Card>
    );
}

formWithFieldArray = (): JSX.Element => {
  return (
    <Card raised style={{padding: 16}}>
      <SQForm
        initialValues={MOCK_FORM_FOR_FIELD_ARRAY}
        onSubmit={handleSubmit}
        muiGridProps={{spacing: 4}}
      >
        <SQFormTextField name="firstName" label="First name" size={3} />
        <SQFormTextField name="lastName" label="Last name" size={3} />
        <SQFormReadOnlyField name="city" label="City" />
        <SQFormReadOnlyField name="state" label="State" size={1} />
        <SQFormAutocomplete
          name="tenThousandOptions"
          label="Ten Thousand Options"
          size={6}
        >
          {MOCK_AUTOCOMPLETE_OPTIONS}
        </SQFormAutocomplete>
        <SQFormTextField name="hobby" label="Hobby" size={4} />
        <SQFormTextField name="age" label="Age" size={2} />
        <SQFormDropdown name="state" label="State" displayEmpty={true} size={4}>
          {MOCK_STATE_OPTIONS}
        </SQFormDropdown>
        <SQFormCheckbox name="cool" label="Cool" />
        <SQFormCheckbox name="lame" label="Lame" isDisabled={true} />
        <Grid item sm={12}>
          <Grid container justifyContent="flex-end">
            <SQFormButton shouldRequireFieldUpdates={true}>Submit</SQFormButton>
          </Grid>
        </Grid>
      </SQForm>
    </Card>
  );
}

ReasourceCard = ({
  href,
  imgUrl,
  title,
  description,
  action,
}: {
  href: string;
  imgUrl: string;
  title: string;
  description: string;
  action: string;
}) => {
  const classes = useStyles();
  return (
    <Card className={classes.card} raised={true} elevation={4}>
      <CardActionArea href={href} target="_blank">
        <CardMedia component="img" alt={title} src={imgUrl} title={title} />
        <CardContent>
          <Typography variant="h6" component="h2">
            {title}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button component="a" size="small" color="primary" href={href} target="_blank">
          {action}
        </Button>
      </CardActions>
    </Card>
  );
}

SurveyPointPopup = ({
  siteId,
  point,
  classes,
}: SurveyPointPopupProps) => {
  return (
    <Popup closeButton={false} autoPan={false}>
      <Card className={classes.surveyPointPopup}>
        <Grid
          container
          alignItems="center"
          justify="space-between"
          item
          spacing={2}
        >
          <Grid title={point.name || ""} item className={classes.nameWrapper}>
            <Typography
              className={classes.name}
              variant="h6"
              color="textSecondary"
            >
              {point.name}
            </Typography>
          </Grid>
          <Grid item>
            <Link
              to={`/sites/${siteId}/points/${point.id}`}
              isIcon
              tooltipTitle="View survey point"
            />
          </Grid>
        </Grid>
      </Card>
    </Popup>
  );
}

EntityBazaarInfoCard = () => {
  const { entity } = useEntity();
  const bazaarApi = useApi(bazaarApiRef);

  const [bazaarProject, fetchBazaarProject] = useAsyncFn(async () => {
    const response = await bazaarApi.getProjectByRef(
      stringifyEntityRef(entity),
    );

    return await parseBazaarResponse(response);
  });

  const [isBazaar, setIsBazaar] = useState(bazaarProject.value ?? false);

  useEffect(() => {
    fetchBazaarProject();
  }, [fetchBazaarProject]);

  useEffect(() => {
    const isBazaarProject = bazaarProject.value !== undefined;

    setIsBazaar(isBazaarProject);
  }, [bazaarProject.value]);

  if (isBazaar) {
    return (
      <Card>
        <EntityBazaarInfoContent
          bazaarProject={bazaarProject.value}
          fetchBazaarProject={fetchBazaarProject}
        />
      </Card>
    );
  }
  return null;
}

export default function MainToolBar(props:any) {
    const classes = useStyles();

    return (
        <Card className={classes.toolBarRoot}>
            <ButtonGroup variant="outlined" color="default" className={classes.toolBarButtonGroup}>
                <Tooltip title="Go Dark" aria-label="Go Dark" placement="top">
                    <Button
                        onClick={() => props.toDark(true)}
                        className={ props.darkMode === true ? classes.selected : ""}>
                        <Brightness3 />
                    </Button>
                </Tooltip>
                <Tooltip title="Light Up" aria-label="Light Up" placement="top">
                    <Button
                        onClick={() => props.toDark(false)}
                        className={ props.darkMode === false ? classes.selected : ""}>
                        <Brightness7 />
                    </Button>
                </Tooltip>
            </ButtonGroup>
        </Card>
    );
}

ListCard: React.SFC<ListCardProps> = ({ ...props }) => {
  const { data } = props;
  const { t } = useTranslation();

  const link = (id: any) => `/${props.link.start}/${id}/${props.link.end}`;

  const viewDetails = (id: any) => (
    <Link to={link(id)} className={styles.Link}>
      <p>{t('View Details')}</p>
    </Link>
  );
  return (
    <div className={styles.CardContainer}>
      {data.map((dataInfo: any) => (
        <Card variant="outlined" className={styles.Card} key={dataInfo.id}>
          <CardContent className={styles.CardContent}>
            <div data-testid="label">{dataInfo.label}</div>

            <Typography variant="body2" component="div" data-testid="description">
              {dataInfo.description}
            </Typography>
          </CardContent>
          <CardActions className={styles.CardActions}>
            {viewDetails(dataInfo.id)}
            {dataInfo.operations}
          </CardActions>
        </Card>
      ))}
    </div>
  );
}

PlayerCard: React.FC<PlayerCardProps> = ({ game, player }) => {
  return (
    <Card
      variant='outlined'
      className='PlayerCard'
      style={{
        backgroundColor: getCardColor(game, player.value),
      }}
    >
      <CardHeader
        className='PlayerCardTitle'
        title={player.name}
        titleTypographyProps={{ variant: 'subtitle2', noWrap: true }}
      />
      <CardContent className='PlayerCardContent'>
        <Typography variant='h2' className='PlayerCardContentMiddle'>
          {getCardValue(player, game)}
        </Typography>
      </CardContent>
    </Card>
  );
}

SingleSegmentCard = ({ segment }: SingleSegmentCardProps) => {
  const { t: translate } = useTranslation();
  const lineTypeLabel = getLineTypeLabel(segment.lineType);
  const trains = getTrainsFromSegment(segment);

  return (
    <Card>
      <CardContent>
        <Grid container>
          <SegmentCardHeader
            label={lineTypeLabel}
            fareLabel={`${segment.fare} ${translate("currency.baht")}`}
          />
          {/* TODO: handle convert segments to train */}
          {trains.map((train, index) => {
            return (
              <Train
                train={train}
                showLastStation={trains.length === 1 || index !== 0}
                key={"train" + index}
              />
            );
          })}
        </Grid>
      </CardContent>
    </Card>
  );
}

DocumentCard = styled(Card)`
  textarea {
    min-height: auto !important;
    background: none;
    border: none;
    padding: none !important;
    font-size: 1rem;
    font-family: inherit !important;
    font-weight: 400;
  }

  textarea:focus {
    border: none;
  }

  input[disabled] {
    background-color: transparent;
  }
`

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

NeoAddNewCard = ({ onCreatePressed }) => {
    return (
        <div>
            <Card style={{ background: "#e0e0e0" }}>
                <CardContent style={{ height: '429px' }}>
                    <Typography variant="h2" color="textSecondary" style={{ paddingTop: "155px", textAlign: "center" }}>
                        <Fab size="medium" className={"blue-grey"} aria-label="add"
                            onClick={() => {
                                onCreatePressed();
                            }} >
                            <AddIcon />
                        </Fab>
                    </Typography>
                </CardContent>
            </Card>
        </div>
    );
}

StyledCard = styled(Card)<{ $warn: boolean }>`
  width: ${planNodeWidth};
  height: ${planNodeHeight};
  font-size: 10pt;
  padding: 12px;
  background-color: ${greyMedium};
  display: inline-flex;
  flex-direction: column;
  cursor: pointer;
  border-width: 2px;
  border-style: solid;
  border-color: ${({ $warn }) => ($warn ? 'orange' : 'transparent')};
`

export default function SwapCard({
  containerStyle,
  contentStyle,
  swapTokenContainerStyle,
}: {
  containerStyle?: any;
  contentStyle?: any;
  swapTokenContainerStyle?: any;
}) {
  const styles = useStyles();
  return (
    <Card className={styles.card} style={containerStyle}>
      <SwapHeader />
      <div style={contentStyle}>
        <SwapFromForm style={swapTokenContainerStyle} />
        <ArrowButton />
        <SwapToForm style={swapTokenContainerStyle} />
        <InfoLabel />
        <SwapButton />
      </div>
    </Card>
  );
}

export default function Variation(props: Props) {
    const styles = useStyles();
    const showPromptForVariations = useSelector(selectShowPromptForVariations);

    return <Card className={styles.card}>
        <CardContent>
            { showPromptForVariations && (
                <>
                    <Typography className={styles.prompt}>{props.prompt}</Typography>
                    <span role={"img"} aria-label={"brain"}>?️</span>
                    <Typography className={styles.output} component={'span'}><strong>{props.output}</strong></Typography>
                </>
            )}
            { !showPromptForVariations && (
                <>
                    <span role={"img"} aria-label={"brain"}>?️</span>
                    <Typography className={styles.output} component={'span'}>{props.output}</Typography>
                </>
            )}
        </CardContent>
        { showPromptForVariations && (
            <CardActions>
                <Typography variant="caption">Temperature: {props.temperature}</Typography>
                <Typography variant="caption">Max tokens: {props.maxTokens}</Typography>
                <Typography variant="caption">Top P: {props.topP}</Typography>
                <Typography variant="caption">Frequency penalty: {props.frequencyPenalty}</Typography>
                <Typography variant="caption">Presence penalty: {props.presencePenalty}</Typography>
                <Typography variant="caption">Model: {props.modelName}</Typography>
            </CardActions>
        )
        }
    </Card>;
}

ProductItem: React.FC<ProductListProps> = ({ product }) => {
    const classes = useStyles();
    const bloc = useCartPloc();

    return (
        <Grid item xs={6} sm={4} md={3} lg={2}>
            <Card className={classes.card}>
                <CardMedia
                    className={classes.cardMedia}
                    image={product.image}
                    title="Image title"
                />
                <CardContent className={classes.cardContent}>
                    <Typography className={classes.productTitle} gutterBottom variant="subtitle1">
                        {product.title}
                    </Typography>
                    <Typography variant="h6" className={classes.productPrice}>
                        {product.price.toLocaleString("es-ES", {
                            style: "currency",
                            currency: "EUR",
                        })}
                    </Typography>
                </CardContent>
                <CardActions className={classes.cardActions}>
                    <Button
                        size="small"
                        color="primary"
                        onClick={() => bloc.addProductToCart(product)}>
                        Add to Cart
                    </Button>
                </CardActions>
            </Card>
        </Grid>
    );
}

export function StatsCard({
  number,
  text,
  tooltip,
  actionButton,
  graphPath,
  diffNumber,
  diffPercent,
}: IStatsCardProps) {
  const classes = useStyles();
  const mediaQuery = useMediaQueryContext();

  return (
    <Card
      className={clsx(classes.root, { [classes.rootSmall]: mediaQuery.smallScreen })}
      elevation={3}
    >
      <CardHeader
        classes={{ title: classes.number, root: classes.cardHeader, subheader: classes.subHeader }}
        title={number}
        subheader={diffNumber && (
          <>
            <DiffNumber value={diffNumber} />
            &nbsp;
            <DiffPercentageChip value={diffPercent} />
          </>
        )}
      />
      <div className={classes.cardContent}>
        <p className={classes.title}>{text}</p>
      </div>

      <CardActions>
        {tooltip && (
          <CustomTooltip arrow enterTouchDelay={0} leaveTouchDelay={10000} title={tooltip}>
            <HelpIcon className={classes.tooltip} />
          </CustomTooltip>
        )}
        {graphPath && (
          <Button
            aria-label="graph"
            component={RouterLink}
            to={graphPath}
            size="small"
            classes={{ label: classes.actionButtonLabel }}
          >
            <Box component="span" marginRight=".5rem">
              Graph
            </Box>
            <TimelineIcon className={classes.actionIcon} />
          </Button>
        )}

        {actionButton}
      </CardActions>
    </Card>
  );
}

LoginScreen = (props: IChallengeProps) => {

  const classes = useStyles();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [failedLogin, setFailedLogin] = useState(false);
  const layoutContext = useContext(LayoutContext);

  let loginError;
  if (failedLogin)
    loginError = <Alert severity="error" >Failed to login</Alert>;


  const doLogin = (user: string, pass: string) => {
    layoutContext.setLoading(true);

    WeakHashingService.login(user, pass).then((res) => {
      if (res.flag) {
        props.setFlag(res.flag);
        setFailedLogin(false);
        window.scrollTo(0, 200);
      }
      else
        setFailedLogin(true);

      layoutContext.setLoading(false);
    }).catch(() => layoutContext.setLoading(false));
  };

  const onUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value);
  const onPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value);
  const onLoginButtonPressed = () => doLogin(username, password);

  return (

    <Box className={classes.container} p={10} pt={5}>
      <Typography variant="h4" className={classes.title} gutterBottom>FakeAndInsecureWebsite</Typography>
      <Box pt={2}>
        <Container maxWidth="sm">

          <Card raised={true}>
            <Box p={5}>
              <Box textAlign="center"><PublicIcon className={classes.siteLogo} /></Box>
              <Grid container spacing={8} alignItems="flex-end">
                <Grid item md={true} sm={true} xs={true}>
                  <TextField id="username" label="Username" type="email" variant="filled" fullWidth required value={username} onChange={onUsernameChange} />
                </Grid>
              </Grid>
              <Grid container spacing={8} alignItems="flex-end">
                <Grid item md={true} sm={true} xs={true}>
                  <TextField id="username" label="Password" type="password" variant="filled" fullWidth required value={password} onChange={onPasswordChange} />
                </Grid>
              </Grid>
              <Grid container alignItems="center" justify="space-between">
                <Grid item>
                  <FormControlLabel control={
                    <Checkbox color="primary" />
                  } label="Remember me" />
                </Grid>
              </Grid>
              <Grid container justify="center" style={{ marginTop: '10px' }}>
                <Button className={classes.loginButton} fullWidth onClick={onLoginButtonPressed} variant="outlined" >Login</Button>
              </Grid>

              <Box mt={5}>{loginError}</Box>
            </Box>
          </Card>
        </Container >
      </Box>
    </Box>

  );
}

ValidatorReportCard = (props: { stash: string, report: Reports }) => {
    const copyValidatorStatistics = () => navigator.clipboard.writeText(scoringPeriodText)
    const [scoringPeriodText, setScoringPeriodText] = useState('')
    const useStyles = makeStyles({
        root: {
            minWidth: '100%',
            textAlign: 'left'
        },
        title: {
            fontSize: 18,
        },
        pos: {
            marginTop: 12,
        },
    });

    const classes = useStyles();

    useEffect(() => {
        updateScoringPeriodText()
    });

    const updateScoringPeriodText = () => {
        if (props.report.report.length > 0) {
            const scoringDateFormat = 'DD-MM-yyyy';
            const report = `Validator Date: ${moment(props.report.startTime).format(scoringDateFormat)} - ${moment(props.report.endTime).format(scoringDateFormat)}\nDescription: I was an active validator from era/block ${props.report.startEra}/${props.report.startBlock} to era/block ${props.report.endEra}/${props.report.endBlock}\nwith stash account ${props.stash}. (I was active in all the eras in this range and found a total of ${props.report.totalBlocks} blocks)`
            setScoringPeriodText(report)
        } else {
            setScoringPeriodText('')
        }
    }

    if (props.report.report.length > 0) {
        return (<Card className={classes.root}>
            <CardContent>
                <Typography className={classes.title} color="textPrimary" gutterBottom>
                    Validator Report:
                </Typography>
                { scoringPeriodText.split('\n').map((i, key) => <Typography key={key} className={classes.pos} color="textSecondary">{i}</Typography>) }
            </CardContent>
            <CardActions>
                <Button onClick={copyValidatorStatistics} size="small">Copy to clipboard</Button>
            </CardActions>
        </Card>)
    }
    return (
        <Card className={classes.root}>
            <CardContent>
                <Typography className={classes.pos} color="textSecondary">
                    No Data Available
                </Typography>
            </CardContent>
        </Card>
    )
}

ModsPage: React.FunctionComponent = () => {
  const enabledMods = useRecoilValue(enabledModList);
  const installedMods = useRecoilValue(installedModList);
  const notInstalledMods = useRecoilValue(notInstalledModList);
  const requiredMods = useRecoilValue(requiredModList);
  const settings = useRecoilValue(settingsState);

  const isEmpty =
    enabledMods.length +
      requiredMods.length +
      installedMods.length +
      notInstalledMods.length ===
    0;

  const isAlphaMissingPath = settings.alphaMode && !settings.alphaPath;

  return (
    <PageContainer maxWidth={false}>
      <Container maxWidth="md">
        <ModsToolbar />
        {!isAlphaMissingPath && (
          <ModRowSection
            title={modsText.modSections.required}
            mods={requiredMods}
            highlighted
          />
        )}
        {isEmpty && (
          <Box mt={2}>
            <Card>
              <Typography variant="h6" align="center">
                {modsText.emptyModList}
              </Typography>
            </Card>
          </Box>
        )}
        {isAlphaMissingPath && (
          <Box mt={2}>
            <Card>
              <Typography variant="h6" align="center">
                {modsText.missingAlphaPath}
              </Typography>
            </Card>
          </Box>
        )}
        {!isAlphaMissingPath && (
          <>
            <ModRowSection
              title={modsText.modSections.enabled}
              mods={enabledMods}
            />
            <ModRowSection
              title={modsText.modSections.installed}
              mods={installedMods}
            />
            <ModRowSection
              title={modsText.modSections.notInstalled}
              mods={notInstalledMods}
            />
          </>
        )}
      </Container>
    </PageContainer>
  );
}

export default function SQFormScrollableCardsMenuWrapper({
  title,
  children,
}: SQFormScrollableCardsMenuWrapperProps): JSX.Element {
  const classes = useStyles();

  const menuItems = React.useMemo(
    () =>
      React.Children.map(children, (child) => {
        return {
          label: child.props.label,
          value: child.props.value,
        };
      }),
    [children]
  );

  const [selectedTab, setSelectedTab] = React.useState(() => menuItems[0]);

  const handleChange = (selectedMenuItemValue: string) => {
    const newSelection = menuItems.find(
      (item) => item.value === selectedMenuItemValue
    );

    if (
      typeof newSelection !== 'undefined' &&
      selectedTab.value !== newSelection.value
    ) {
      setSelectedTab(newSelection);
    }
  };

  const SelectedForm = React.useMemo(() => {
    const selected = getSelectedComponent(selectedTab, children);
    return selected;
  }, [selectedTab, children]);

  return (
    <Card raised={true} elevation={1} square={true} className={classes.card}>
      <CardHeader
        classes={{
          action: classes.action,
          title: classes.title,
        }}
        title={title}
        className={classes.cardHeader}
        titleTypographyProps={{variant: 'h5'}}
        action={
          <CardPopoverMenu
            tabs={menuItems}
            selectedTab={selectedTab}
            selectTab={handleChange}
          />
        }
      />
      {SelectedForm}
    </Card>
  );
}

HomePage: FunctionComponent = () => {
  const classes = useStyles();

  return (
    <>
      <Head>
        {/* The title of the webpage as displayed in the tab name. */}
        <title>{t('pages:page-title')}</title>
      </Head>
      <Container maxWidth={false} className={clsx(classes.background)}>
        <div className={classes.homeHeader}>
          {/* Use a bare PNG image. No weird WEBP handling should prevent rendering this. */}
          <NextImage
            priority
            src={'/images/logo.png'}
            width={80}
            height={80}
            className={classes.logo}
            alt={t('pages:page-title')}
          />
          <Typography variant="h3">{t('pages:page-title')}</Typography>
        </div>
        <div className={classes.homeBody}>
          <Grid container justify="center" spacing={2}>
            <Grid item xs={4} style={{ display: 'none' }}>
              <Link href="/achievements">
                <Card className={classes.pageButtonLink}>
                  <CardContent>
                    <Typography variant="h2" className={classes.pageButtonText}>
                      {t('pages:page-achievements')}
                    </Typography>
                  </CardContent>
                </Card>
              </Link>
            </Grid>
            <Grid item xs={4}>
              <Link href="/map">
                <Card className={classes.pageButtonLink}>
                  <CardContent>
                    <Typography variant="h2" className={classes.pageButtonText}>
                      {t('pages:page-map')}
                    </Typography>
                  </CardContent>
                </Card>
              </Link>
            </Grid>
          </Grid>
        </div>
        <div className={classes.homeFooter}>
          <Typography className={classes.subtitle}>
            {f('version-format', { version: getApplicationVersion() })}
          </Typography>
        </div>
      </Container>
    </>
  );
}

TestVariationList: React.FunctionComponent<IProps> = ({
  items,
  onDeleteClick,
}) => {
  const classes = useStyles();
  const [selectedItem, setSelectedItem] = React.useState<TestVariation | null>(
    null
  );

  const handleClose = () => {
    setSelectedItem(null);
  };

  return (
    <React.Fragment>
      <Grid container>
        {items.length === 0 && (
          <Typography variant="h5">No variations</Typography>
        )}
        {items.map((t) => (
          <Grid item key={t.id} xs={4}>
            <Card className={classes.card}>
              <CardMedia
                component="img"
                className={classes.media}
                image={staticService.getImage(t.baselineName)}
                title={t.name}
              />
              <CardContent>
                <TestVariationDetails testVariation={t} />
              </CardContent>
              <CardActions>
                <Button
                  color="primary"
                  component={Link}
                  to={`${routes.VARIATION_DETAILS_PAGE}/${t.id}`}
                >
                  History
                </Button>
                <IconButton
                  onClick={(event: React.MouseEvent<HTMLElement>) =>
                    setSelectedItem(t)
                  }
                >
                  <Delete />
                </IconButton>
              </CardActions>
            </Card>
          </Grid>
        ))}
      </Grid>

      {selectedItem && (
        <BaseModal
          open={!!selectedItem}
          title={"Delete TestVariation"}
          submitButtonText={"Delete"}
          onCancel={handleClose}
          content={
            <Typography>{`Are you sure you want to delete: ${selectedItem.name}?`}</Typography>
          }
          onSubmit={() => {
            onDeleteClick(selectedItem.id);
            handleClose();
          }}
        />
      )}
    </React.Fragment>
  );
}

BlogCard = ({
  blog,
  selection,
}: {
  blog: Blog;
  selection?: (blog: Blog) => void;
}): ReactElement => {
  const classes = useStyles();

  const { title, description, author, imgUrl, blogUrl, publishedAt } = blog;

  return (
    <Card
      className={classes.card}
      raised={true}
      onClick={() => {
        selection && selection(blog);
      }}
    >
      <CardActionArea className={classes.cardContent} component={Link} to={'/blog/' + blogUrl}>
        <CardMedia
          className={classes.cardMedia}
          component="img"
          alt={title}
          src={imgUrl}
          title={title}
        />
        <CardContent>
          <Typography variant="h6" component="h2" className={classes.cardTitle}>
            {title}
          </Typography>
          <Typography
            variant="body2"
            color="textSecondary"
            component="p"
            className={classes.cardDescription}
          >
            {description}
          </Typography>
        </CardContent>
        <CardHeader
          className={classes.cardAuthor}
          avatar={
            author.profilePicUrl ? (
              <Avatar aria-label={author.name} src={author.profilePicUrl} />
            ) : (
              <FirstLetter text={author.name} />
            )
          }
          title={author.name}
          subheader={convertToReadableDate(publishedAt)}
        />
      </CardActionArea>
    </Card>
  );
}