feat(striker-ui): add striker config page WIP

striker-ui/components/StrikerConfig/ComplexOperationsPanel.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+
+import FlexBox from '../FlexBox';
+import { ExpandablePanel, Panel } from '../Panels';
+import { BodyText } from '../Text';
+
+const ComplexOperationsPanel: FC = () => (
+  <Panel>
+    <ExpandablePanel header={<BodyText>Configure striker peers</BodyText>}>
+      <FlexBox>
+        <BodyText>Inbound connections</BodyText>
+      </FlexBox>
+    </ExpandablePanel>
+  </Panel>
+);
+
+export default ComplexOperationsPanel;

striker-ui/components/StrikerConfig/SimpleOperationsPanel.tsx

@@ -0,0 +1,39 @@
+import { Grid } from '@mui/material';
+import { FC } from 'react';
+import ContainedButton, { ContainedButtonProps } from '../ContainedButton';
+import { Panel, PanelHeader } from '../Panels';
+import { HeaderText } from '../Text';
+
+type SimpleOperationsPanelProps = {
+  strikerHostName: string;
+};
+
+const StretchedButton: FC<ContainedButtonProps> = (props) => (
+  <ContainedButton {...props} sx={{ width: '100%' }} />
+);
+
+const SimpleOperationsPanel: FC<SimpleOperationsPanelProps> = ({
+  strikerHostName,
+}) => (
+  <Panel>
+    <PanelHeader>
+      <HeaderText text={strikerHostName} />
+    </PanelHeader>
+    <Grid columns={{ xs: 1, sm: 2 }} container spacing="1em">
+      <Grid item sm={2} xs={1}>
+        <StretchedButton>Update system</StretchedButton>
+      </Grid>
+      <Grid item sm={2} xs={1}>
+        <StretchedButton>Enable &quot;Install target&quot;</StretchedButton>
+      </Grid>
+      <Grid item xs={1}>
+        <StretchedButton>Reboot</StretchedButton>
+      </Grid>
+      <Grid item xs={1}>
+        <StretchedButton>Shutdown</StretchedButton>
+      </Grid>
+    </Grid>
+  </Panel>
+);
+
+export default SimpleOperationsPanel;

striker-ui/components/StrikerConfig/index.tsx

@@ -0,0 +1,4 @@
+import ComplexOperationsPanel from './ComplexOperationsPanel';
+import SimpleOperationsPanel from './SimpleOperationsPanel';
+
+export { ComplexOperationsPanel, SimpleOperationsPanel };

striker-ui/pages/config/index.tsx

@@ -0,0 +1,25 @@
+import { Box, Grid } from '@mui/material';
+import { FC } from 'react';
+
+import Header from '../../components/Header';
+
+import {
+  ComplexOperationsPanel,
+  SimpleOperationsPanel,
+} from '../../components/StrikerConfig';
+
+const Config: FC = () => (
+  <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+    <Header />
+    <Grid container columns={{ xs: 1, md: 3, lg: 4 }}>
+      <Grid item xs={1}>
+        <SimpleOperationsPanel strikerHostName="STRIKER NAME" />
+      </Grid>
+      <Grid item md={2} xs={1}>
+        <ComplexOperationsPanel />
+      </Grid>
+    </Grid>
+  </Box>
+);
+
+export default Config;