feat: create an AnvilList component to show Anvils' status and allow seelction

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 component="nav" className={classes.root} aria-label="mailbox folders">
+      <Divider className={classes.divider} />
+      {list.map((anvil) => {
+        return (
+          <ListItem button key={anvil.anvil_uuid}>
+            <BodyText text={anvil.anvil_name} />
+            <BodyText text={anvil.anvil_state} />
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+};
+
+export default AnvilList;

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 (
     <Panel>
       <Grid container alignItems="center" justify="space-around">
-        {anvils.map((anvil) => (
-          <Anvil anvil={anvil} key={anvil.anvil_uuid} />
-        ))}
+        <SelectedAnvil anvil={anvils[0]} />
+        <AnvilList list={anvils} />
       </Grid>
     </Panel>
   );