feat: create base components for all the sections

striker-ui/components/Anvils.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import { Switch, Grid } from '@material-ui/core';
+import Panel from './Panel';
+import { HeaderText, BodyText } from './Text';
+
+const Anvils = (): JSX.Element => {
+  const [checked, setChecked] = useState<boolean>(true);
+  return (
+    <Panel>
+      <Grid container alignItems="center" justify="space-around">
+        <Grid item xs={12}>
+          <HeaderText text="Anvils" />
+        </Grid>
+        <Grid item xs={4}>
+          <BodyText text="Anvil 4" />
+          <BodyText text="Optimal" />
+        </Grid>
+        <Grid item xs={3}>
+          <Switch checked={checked} onChange={() => setChecked(!checked)} />
+        </Grid>
+      </Grid>
+    </Panel>
+  );
+};
+
+export default Anvils;

striker-ui/components/CPU.tsx

@@ -0,0 +1,43 @@
+import { withStyles } from '@material-ui/core/styles';
+import { Grid, LinearProgress, Typography } from '@material-ui/core';
+import Panel from './Panel';
+import Text from './Text/HeaderText';
+import { PURPLE_OFF, RED_ON } from '../lib/consts/DEFAULT_THEME';
+
+const BorderLinearProgress = withStyles({
+  root: {
+    height: 10,
+    borderRadius: 5,
+  },
+  colorPrimary: {
+    backgroundColor: PURPLE_OFF,
+  },
+  bar: {
+    borderRadius: 5,
+    backgroundColor: RED_ON,
+  },
+})(LinearProgress);
+
+const CPU = (): JSX.Element => {
+  return (
+    <Panel>
+      <Grid container alignItems="center" justify="space-around">
+        <Grid item xs={12}>
+          <Text text="CPU" />
+        </Grid>
+        <Grid item xs={3}>
+          <Typography variant="subtitle1">Allocated: 3</Typography>
+        </Grid>
+        <Grid item xs={3}>
+          <Typography variant="subtitle1">Free: 6</Typography>
+        </Grid>
+        <Grid item xs={10}>
+          <BorderLinearProgress variant="determinate" value={50} />
+          <LinearProgress variant="determinate" value={0} />
+        </Grid>
+      </Grid>
+    </Panel>
+  );
+};
+
+export default CPU;

striker-ui/components/Memory.tsx

@@ -0,0 +1,43 @@
+import { withStyles } from '@material-ui/core/styles';
+import { Grid, LinearProgress, Typography } from '@material-ui/core';
+import Panel from './Panel';
+import Text from './Text/HeaderText';
+import { PURPLE_OFF, RED_ON } from '../lib/consts/DEFAULT_THEME';
+
+const BorderLinearProgress = withStyles({
+  root: {
+    height: 10,
+    borderRadius: 5,
+  },
+  colorPrimary: {
+    backgroundColor: PURPLE_OFF,
+  },
+  bar: {
+    borderRadius: 5,
+    backgroundColor: RED_ON,
+  },
+})(LinearProgress);
+
+const Memory = (): JSX.Element => {
+  return (
+    <Panel>
+      <Grid container alignItems="center" justify="space-around">
+        <Grid item xs={12}>
+          <Text text="Memory" />
+        </Grid>
+        <Grid item xs={3}>
+          <Typography variant="subtitle1">Allocated: 14GB</Typography>
+        </Grid>
+        <Grid item xs={3}>
+          <Typography variant="subtitle1">Free: 50GB</Typography>
+        </Grid>
+        <Grid item xs={10}>
+          <BorderLinearProgress variant="determinate" value={50} />
+          <LinearProgress variant="determinate" value={0} />
+        </Grid>
+      </Grid>
+    </Panel>
+  );
+};
+
+export default Memory;

striker-ui/components/Nodes.tsx

@@ -0,0 +1,12 @@
+import Panel from './Panel';
+import Text from './Text/HeaderText';
+
+const Nodes = (): JSX.Element => {
+  return (
+    <Panel>
+      <Text text="Nodes" />
+    </Panel>
+  );
+};
+
+export default Nodes;

striker-ui/components/ReplicatedStorage.tsx

@@ -0,0 +1,14 @@
+import Panel from './Panel';
+import Text from './Text/HeaderText';
+import InnerPanel from './InnerPanel';
+
+const ReplicatedStorage = (): JSX.Element => {
+  return (
+    <Panel>
+      <Text text="Replicated Storage" />
+      <InnerPanel />
+    </Panel>
+  );
+};
+
+export default ReplicatedStorage;

striker-ui/components/SharedStorage.tsx

@@ -0,0 +1,12 @@
+import Panel from './Panel';
+import Text from './Text/HeaderText';
+
+const SharedStorage = (): JSX.Element => {
+  return (
+    <Panel>
+      <Text text="Shared Storage" />
+    </Panel>
+  );
+};
+
+export default SharedStorage;