Merge branch 'website-layout' of https://github.com/yoonieaj/memory-viz…

… into website-layout
david-yz-liu · Aug 11, 2024 · 6e8ed55 · 6e8ed55
2 parents 743771e + 40e6d24
commit 6e8ed55
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 651 deletions.
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from "react";
-import SvgDisplay from "./SvgDisplay";
-import MemoryModelsUserInput from "./MemoryModelsUserInput";
+import { configDataPropTypes } from "./UserInput";
+import UserInput from "./UserInput";
+import Header from "./Header";
+import { Box } from "@mui/material";
 import { ErrorBoundary } from "react-error-boundary";
-import DownloadSVGButton from "./DownloadSVGButton";
-import { Alert } from "@mui/material";
-import { configDataPropTypes } from "./MemoryModelsUserInput";
-import MemoryModelsSample from "./MemoryModelsSample";
+import UserOutput from "./UserOutput";
 
 export default function App() {
     const [textData, setTextData] = useState("");
@@ -34,44 +33,34 @@ export default function App() {
 
     return (
         <>
-            {failureBanner && (
-                <Alert severity="error" data-testid="json-parse-alert">
-                    {failureBanner}
-                </Alert>
-            )}
-            <MemoryModelsSample
-                setTextData={setTextData}
-                setConfigData={setConfigData}
-                onTextDataSubmit={onTextDataSubmit}
-            />
-            <MemoryModelsUserInput
-                textData={textData}
-                setTextData={setTextData}
-                configData={configData}
-                setConfigData={setConfigData}
-                onTextDataSubmit={onTextDataSubmit}
-                setFailureBanner={setFailureBanner}
-                jsonResult={jsonResult}
-            />
-            <section>
-                <h2>Output</h2>
-                <DownloadSVGButton svgResult={svgResult} />
-                <ErrorBoundary
-                    fallback={
-                        <p data-testid="svg-display-error-boundary">
-                            This is valid JSON but not valid Memory Models JSON.
-                            Please refer to the repo for more details.
-                        </p>
-                    }
-                    key={jsonResult}
-                >
-                    <SvgDisplay
+            <Header />
+            <Box
+                sx={{
+                    display: "flex",
+                    gap: "2rem",
+                }}
+            >
+                <Box sx={{ width: "40%" }}>
+                    <UserInput
+                        textData={textData}
+                        setTextData={setTextData}
+                        configData={configData}
+                        setConfigData={setConfigData}
+                        onTextDataSubmit={onTextDataSubmit}
+                        setFailureBanner={setFailureBanner}
+                        jsonResult={jsonResult}
+                    />
+                </Box>
+                <Box sx={{ width: "60%" }}>
+                    <UserOutput
                         jsonResult={jsonResult}
                         configData={configData}
+                        setConfigData={setConfigData}
+                        svgResult={svgResult}
                         setSvgResult={setSvgResult}
                     />
-                </ErrorBoundary>
-            </section>
+                </Box>
+            </Box>
         </>
     );
 }
diff --git a/demo/src/AppTwo.tsx b/demo/src/AppTwo.tsx
diff --git a/demo/src/DownloadJSONButton.tsx b/demo/src/DownloadJSONButton.tsx
diff --git a/demo/src/DownloadSVGButton.tsx b/demo/src/DownloadSVGButton.tsx
diff --git a/demo/src/MemoryModelsSample.tsx b/demo/src/MemoryModelsSample.tsx