Added a grid layout

Author: matthewxing1

ksqLight/src/App.js

@@ -8,7 +8,7 @@ import { Drawer, CssBaseline } from "@mui/material";
 
 function App() {
   const [fetchMetrics, setFetchMetrics] = useState(true);
-  const [showSettings, setShowSettings] = useState(true);
+  const [showSettings, setShowSettings] = useState(false);
 
   return (
     <BrowserRouter>

ksqLight/src/components/Chart.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Grid, Typography } from "@mui/material";
+
+export const Chart = ({ content }) => {
+
+  return (
+      <Grid item xs={4}>
+        <Typography color="primary">{content}</Typography>
+      </Grid>
+  )
+}

ksqLight/src/components/Homepage.js

@@ -1,13 +1,22 @@
 import React from "react";
-import { Typography, Drawer, Toolbar } from "@mui/material";
-import { SettingsSidebar } from "./SettingsSidebar.js";
+import { useState } from "react";
+import { Typography, Grid, Toolbar } from "@mui/material";
+import { Chart } from "./Chart.js";
 
 export const Homepage = () => {
-
+  const [content, setContent] = useState('Content example');
   return (
     <div>
       <Toolbar></Toolbar>
       <Typography color="primary">Homepage</Typography>
+      <Grid container spacing={2} justifyContent="flex-start" alignItems="flex-start">
+        <Chart content={content}></Chart>
+        <Chart content={content}></Chart>
+        <Chart content={content}></Chart>
+        <Chart content={content}></Chart>
+        <Chart content={content}></Chart>
+        <Chart content={content}></Chart>
+      </Grid>
     </div>
 
   )

ksqLight/src/components/SettingsSidebar.js

@@ -32,7 +32,6 @@ export const SettingsSidebar = ({ showSettings }) => {
 
   return(
     <Drawer variant="temporary" anchor="right" open={showSettings}>
-      <Toolbar></Toolbar>
     <div className="flex-1 w-full header-viewport bg-slate-800 p-4">
       <form noValidate autoComplete="off">
           <Typography variant="h5">Prometheus Connection</Typography>