adding the form to the right side of the page when veiwing custom grains

src/pages/Grains.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import PageContainer from "./PageContainer";
 import CustomGrainForm from "grain/CustomGrainForm";
-import { Button } from "@mui/material";
+import { Box, Button, Grid2, Typography } from "@mui/material";
 import { pond } from "protobuf-ts/pond";
+import ButtonGroup from "common/ButtonGroup";
+import { useMobile } from "hooks";
 
 export default function Grains() {
   const [currentCustomGrain, setCurrentCustomGrain] = useState<pond.GrainSettings>()
+  const [displayCustom, setDisplayCustom] = useState(false)
+  const [grainTableData, setGrainTableData] = useState()
+  const isMobile = useMobile()
 
   //function to load the first set of custom grains
   const loadCustomGrain = () => {}
@@ -16,20 +21,72 @@ export default function Grains() {
   const grainTab = () => {}
 
   //table that will display the grains (both for the supported grain and custom for the user)
-  const grainTable = () => {}
+  const grainTable = () => {
+
+  }
 
   //the grain display for supported grain type to show the rest of the data such as what constants are used in the formula
-  const supportedDisplay = () => {}
+  const supportedDisplay = () => {
+    return (
+      <Box></Box>
+    )
+  }
 
   //the grain display for custom grain the user has defined
-  const customGrainDisplay = () => {}
+  const customGrainDisplay = () => {
+    return (
+      <Box padding={2}>
+        <CustomGrainForm grainSettings={currentCustomGrain} onGrainSettingsChange={()=>{}}/>
+      </Box>
+    )
+  }
+
+  const desktopView = () => {
+    return (
+      <Grid2 container>
+        <Grid2 size={7}>
+
+        </Grid2>
+        <Grid2 size={5}>
+          {displayCustom ? customGrainDisplay() : supportedDisplay()}
+        </Grid2>
+      </Grid2>
+    )
+  }
+
+  const mobileView = () => {
+    return (
+      <Box></Box>
+    )
+  }
 
   return (
     <PageContainer>
-      GRAIN PAGE
-      <CustomGrainForm grainSettings={currentCustomGrain} onGrainSettingsChange={()=>{}}/>
-        <Button onClick={() => {setCurrentCustomGrain(pond.GrainSettings.create({name: "grain one"}))}}>CG1</Button>
-        <Button onClick={() => {setCurrentCustomGrain(pond.GrainSettings.create({name: "grain two"}))}}>CG2</Button>
+      <Typography>
+        GRAIN PAGE
+      </Typography>
+      <Box display="flex" margin={2}>
+        <ButtonGroup 
+          toggle
+          buttons={[
+            {
+              title: "Supported",
+              function: () => {
+                setDisplayCustom(false)
+              }
+            },
+            {
+              title: "Custom",
+              function: () => {
+                setDisplayCustom(true)
+              }
+            }
+          ]}
+        />
+      </Box>
+        {!isMobile ? desktopView() : mobileView()}
+        {/* <Button onClick={() => {setCurrentCustomGrain(pond.GrainSettings.create({name: "grain one"}))}}>CG1</Button>
+        <Button onClick={() => {setCurrentCustomGrain(pond.GrainSettings.create({name: "grain two"}))}}>CG2</Button> */}
     </PageContainer>
   )
 }