diff --git a/striker-ui/components/AnvilList.tsx b/striker-ui/components/AnvilList.tsx new file mode 100644 index 00000000..ae0a3aaf --- /dev/null +++ b/striker-ui/components/AnvilList.tsx @@ -0,0 +1,35 @@ +import { makeStyles } from '@material-ui/core/styles'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import Divider from '@material-ui/core/Divider'; +import { BodyText } from './Text'; +import { TEXT } from '../lib/consts/DEFAULT_THEME'; + +const useStyles = makeStyles(() => ({ + root: { + width: '100%', + }, + divider: { + background: TEXT, + }, +})); + +const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => { + const classes = useStyles(); + + return ( + + + {list.map((anvil) => { + return ( + + + + + ); + })} + + ); +}; + +export default AnvilList; diff --git a/striker-ui/components/Anvils.tsx b/striker-ui/components/Anvils.tsx index 509d24af..ec5cf039 100644 --- a/striker-ui/components/Anvils.tsx +++ b/striker-ui/components/Anvils.tsx @@ -1,7 +1,8 @@ import { Grid } from '@material-ui/core'; -import Anvil from './Anvil'; import Panel from './Panel'; import PeriodicFetch from '../lib/fetchers/periodicFetch'; +import SelectedAnvil from './SelectedAnvil'; +import AnvilList from './AnvilList'; const Anvils = ({ list }: { list: AnvilList | undefined }): JSX.Element => { const anvils: AnvilListItem[] = []; @@ -21,9 +22,8 @@ const Anvils = ({ list }: { list: AnvilList | undefined }): JSX.Element => { return ( - {anvils.map((anvil) => ( - - ))} + + );