Program page button alignment

This commit is contained in:
nickofolas 2022-01-15 10:20:01 -06:00
parent 14af744a0c
commit 919c001060

@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import { use } from "../../ui/Context"; import { use } from "../../ui/Context";
import { getAvailableCreatePrograms } from "../ProgramHelpers"; import { getAvailableCreatePrograms } from "../ProgramHelpers";
import { Tooltip, Typography } from "@mui/material"; import { Box, Tooltip, Typography } from "@mui/material";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
export const ProgramsSeen: string[] = []; export const ProgramsSeen: string[] = [];
@ -38,27 +38,28 @@ export function ProgramsRoot(): React.ReactElement {
time. Your progress will be saved and you can continue later. time. Your progress will be saved and you can continue later.
</Typography> </Typography>
{programs.map((program) => { <Box sx={{ display: 'grid', width: 'fit-content' }}>
const create = program.create; {programs.map((program) => {
if (create === null) return <></>; const create = program.create;
if (create === null) return <></>;
return ( return (
<React.Fragment key={program.name}> <React.Fragment key={program.name}>
<Tooltip title={create.tooltip}> <Tooltip title={create.tooltip}>
<Button <Button
sx={{ my: 1 }} sx={{ my: 1 }}
onClick={(event) => { onClick={(event) => {
if (!event.isTrusted) return; if (!event.isTrusted) return;
player.startCreateProgramWork(router, program.name, create.time, create.level); player.startCreateProgramWork(router, program.name, create.time, create.level);
}} }}
> >
{program.name} {program.name}
</Button> </Button>
</Tooltip> </Tooltip>
<br /> </React.Fragment>
</React.Fragment> );
); })}
})} </Box>
</> </>
); );
} }