Create display view

src/App.scss

@@ -0,0 +1,10 @@
+.edit-mode-container {
+    display: flex;
+    flex-direction: column;
+
+    & .button-module {
+        display: flex;
+        flex-direction: row;
+        align-self: flex-start;
+    }
+}

src/DisplayView.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function DisplayView({ width = '100%', children }) {
+  /************************************
+   * Render
+   ************************************/ 
+
+  return (
+    <div style={{width: width}}> 
+      {children ? children : <p>Nothing to Display.</p>}
+    </div>
+  );
+}

src/EditMode.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import './App.scss';
+
+import EditView from './EditView';
+import DisplayView from './DisplayView';
+
+  /************************************
+   * Constants
+   ************************************/
+
+const EDIT_VIEW = 'EDIT';
+const DISPLAY_VIEW = 'DISPLAY';
+
+export default function EditMode({width = '100%', height = '500px'}) {
+  /************************************
+   * State
+   ************************************/
+
+  const [view, setView] = useState(EDIT_VIEW);
+
+  /************************************
+   * Render
+   ************************************/ 
+
+   return (
+    <div className='edit-mode-container' style={{width: width, height: height}}>
+      <div className='button-module'>
+        <button onClick={() => setView(EDIT_VIEW)}>Edit</button>
+        <button onClick={() => setView(DISPLAY_VIEW)}>Preview</button>
+      </div>
+      { view === EDIT_VIEW ? <EditView /> : <DisplayView>{/* TODO: Parsed Markdown Goes Here */}</DisplayView> }
+    </div>
+  );
+}

src/EditView.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function EditView({ onValueChange, ...rest }) {
+  /************************************
+   * Render
+   ************************************/ 
+
+  return (
+     <textarea style={{height: 'inherit'}} {...rest} onChange={onValueChange}></textarea>
+  );
+}

src/LeifdownApp.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import EditMode from './EditMode';
+
+export default function LeifdownApp() {
+  /************************************
+   * Render
+   ************************************/ 
+
+  return (
+    <EditMode />
+  );
+}

src/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import LeifdownApp from './LeifdownApp';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <LeifdownApp />
   </React.StrictMode>,
   document.getElementById('root')
 );