Add display data pageexit

src/App.css

@@ -2,6 +2,12 @@
   text-align: center;
 }
 
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;

src/components/components.css

@@ -4,7 +4,7 @@
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+    font-family: sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
     sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-size: 14px;
     line-height: 1.5;
@@ -114,4 +114,29 @@ button.outline {
 
 .header{
     font-size: xx-large;
-}
+}
+#mainComponent{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-section {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.flex-col-scroll {
+    height: 100%;
+
+    position: relative;
+    z-index: 1;
+    top: 0;
+    overflow-x: hidden;
+}
+
+.flex-no-shrink {
+    flex-shrink: 0;
+}

src/components/manifest/Form.tsx

@@ -14,6 +14,11 @@ import withStyles, {WithStyles} from "@material-ui/core/styles/withStyles";
 import {createStyles} from "@material-ui/core";
 import {useEffect} from "react";
 import MenuAppBar from "../layout/Header";
+import Grid from "@material-ui/core/Grid";
+import './../components.css';
+import ShowDemo from "../admin/editform/ShowDemo";
+import {useState} from "react";
+import Button from "@material-ui/core/Button";
 
 const styles = createStyles({
     container: {
@@ -42,22 +47,53 @@ const data: any = {
 const Form = () => {
     const [displayDataAsString, setDisplayDataAsString] = React.useState('');
     const [standaloneData, setStandaloneData] = React.useState(data);
+
     useEffect(() => {
-        console.log(standaloneData);
+        setDisplayDataAsString(JSON.stringify(standaloneData, null, 2));
     }, [standaloneData]);
+
     return (
-        <div>
+        <div id="mainComponent">
             <MenuAppBar name={"Create New Manifest File"}/>
-            <JsonForms
-                schema={jsonSchema}
-                uischema={uiSchema}
-                data={standaloneData}
-                renderers={[
-                    ...materialRenderers,
-                ]}
-                cells={materialCells}
-                onChange={({errors, data}) => setStandaloneData(data)}
-            />
+            <Grid container style={{padding: '2em'}} >
+                <Grid item xs={8} >
+                    <div style={{
+                        margin: 'auto',
+                        padding: '1rem',
+                        color: 'green'
+                    }}>
+                        <JsonForms
+                            schema={jsonSchema}
+                            uischema={uiSchema}
+                            data={standaloneData}
+                            renderers={[
+                                ...materialRenderers,
+                            ]}
+                            cells={materialCells}
+                            onChange={({errors, data}) => setStandaloneData(data)}
+                        />
+                    </div>
+                    <Button type="submit" onClick={()=>{
+
+                    }}>Submit</Button>
+                </Grid>
+                <Grid item xs className="flex-col-scroll">
+                    <div style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        marginTop: '1rem',
+                        borderRadius: '0.75em',
+                        backgroundColor: '#cecece',
+                        fontFamily: 'verdana',
+                        fontSize: 18
+                    }}>
+                        <h3>Manifest Data</h3>
+                        <pre>{displayDataAsString}</pre>
+                    </div>
+                </Grid>
+            </Grid>
         </div>
     );
 };