From 626b73a8593fec7d585edee77629c17e850ac439 Mon Sep 17 00:00:00 2001
From: Matheus Marabesi <matheus.marabesi@gmail.com>
Date: Sun, 17 Jul 2022 18:51:19 +0200
Subject: [PATCH] chore: checkpoint splitting components

---
 src/App.tsx                   | 76 ++++++++++++++++++++++-------------
 src/components/Header.tsx     | 10 +++++
 src/components/JsonEditor.tsx |  2 +-
 tailwind.config.js            |  1 +
 4 files changed, 61 insertions(+), 28 deletions(-)
 create mode 100644 src/components/Header.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 60240d9..f50ebba 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,17 @@ import JsonMenu from "./components/JsonMenu";
 
 const cleanUp = new CleanUp();
 
+function Header() {
+  return <div className="bg-blue-900 flex justify-between p-5 text-white">
+    <div className="flex">
+      <h2 className="text-yellow-400 font-bold">JSON tool</h2> |
+      <a href="https://github.com/marabesi/json-tool" target="_blank" rel="noreferrer">by marabesi</a>
+    </div>
+    <a data-testid="buy-me-a-coffee" href="https://www.buymeacoffee.com/marabesi" target="_blank" rel="noreferrer">Buy
+      me a coffee</a>
+  </div>;
+}
+
 function App() {
   const [originalJson, setOriginalResult] = useState<string>('');
   const [result, setResult] = useState<string>('');
@@ -80,17 +91,11 @@ function App() {
   const updateSpacing = (newSpacing: string) => setSpacing(newSpacing);
 
   return (
-      <div className="bg-gray-500">
-        <div className="bg-blue-900 flex justify-between p-5 text-white">
-          <div className="flex">
-            <h2 className="text-yellow-400 font-bold">JSON tool</h2> |
-            <a href="https://github.com/marabesi/json-tool" target="_blank" rel="noreferrer">by marabesi</a>
-          </div>
-          <a data-testid="buy-me-a-coffee" href="https://www.buymeacoffee.com/marabesi" target="_blank" rel="noreferrer">Buy me a coffee</a>
-        </div>
-        <div className="h-screen p-1">
+      <div className="bg-gray-500 flex flex-col h-screen">
+        <Header />
+        <div className="p-1 h-full">
           <div className="flex h-5/6">
-            <div className="w-3/6 flex flex-col h-full m-1">
+            <EditorContainer>
               <JsonMenu
                   pasteFromClipboard={pasteFromClipboard}
                   cleanup={cleanup}
@@ -101,30 +106,47 @@ function App() {
                   onChange={eventValue => onJsonChange(eventValue.value)}
                   data-testid="json"
               />
-            </div>
-            <div className="w-3/6 flex flex-col h-full m-1">
-              <ResultMenu
-                spacing={spacing}
-                updateSpacing={updateSpacing}
-                writeToClipboard={writeToClipboard}
-                cleanWhiteSpaces={cleanWhiteSpaces}
-                cleanNewLines={cleanNewLines}
-                cleanNewLinesAndSpaces={cleanNewLinesAndSpaces}
-              />
-
-              <JsonEditor
-                  input={result}
-                  className="result"
-                  data-testid="result"
-              />
-            </div>
+            </EditorContainer>
+            <EditorContainer>
+                <ResultMenu
+                    spacing={spacing}
+                    updateSpacing={updateSpacing}
+                    writeToClipboard={writeToClipboard}
+                    cleanWhiteSpaces={cleanWhiteSpaces}
+                    cleanNewLines={cleanNewLines}
+                    cleanNewLinesAndSpaces={cleanNewLinesAndSpaces}
+                />
+
+                <JsonEditor
+                    input={result}
+                    className="result"
+                    data-testid="result"
+                />
+            </EditorContainer>
           </div>
           <div className="bg-red-600 m-1 text-center text-white">
             {error && <p data-testid="error">{error}</p>}
           </div>
         </div>
+        <div className="flex bg-gray-200 text-white p-5">
+          <span>
+            Footer text or link about CC
+          </span>
+          |
+          <span>
+            Other foot text with usual legal stuff
+          </span>
+        </div>
       </div>
   );
 }
 
 export default App;
+
+function EditorContainer({ children }: any) {
+  return (
+      <div className="w-3/6 flex flex-col h-full m-1">
+        {children}
+      </div>
+  );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..6e3fc69
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,10 @@
+export default function Header() {
+  return <div className="bg-blue-900 flex justify-between p-5 text-white">
+    <div className="flex">
+      <h2 className="text-yellow-400 font-bold">JSON tool</h2> |
+      <a href="https://github.com/marabesi/json-tool" target="_blank" rel="noreferrer">by marabesi</a>
+    </div>
+    <a data-testid="buy-me-a-coffee" href="https://www.buymeacoffee.com/marabesi" target="_blank" rel="noreferrer">Buy
+      me a coffee</a>
+  </div>;
+}
diff --git a/src/components/JsonEditor.tsx b/src/components/JsonEditor.tsx
index 2962f73..890b7d5 100644
--- a/src/components/JsonEditor.tsx
+++ b/src/components/JsonEditor.tsx
@@ -29,7 +29,7 @@ export default function JsonEditor({ input, onChange, className, ...rest }: Prop
           <CodeMirror
               value={input}
               onChange={handleChange}
-              className={[className, 'h-full'].join(' ')}
+              className={[className, 'h-full mt-5'].join(' ')}
               style={{
                   fontSize: 12,
                   backgroundColor: fullConfig.theme.backgroundColor.gray['200'],
diff --git a/tailwind.config.js b/tailwind.config.js
index 3bba8c3..4e5df0d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,4 +18,5 @@ module.exports = {
     extend: {},
   },
   plugins: [],
+  extend: {}
 };