stub #/latl route components

src/PhonoChangeApplier.js

@@ -28,7 +28,7 @@ const PhonoChangeApplier = () => {
 
       <Route exact path="/latl">
         <Link to="/">Back to GUI</Link>
-        <div className="PhonoChangeApplier--gui">
+        <div className="PhonoChangeApplier PhonoChangeApplier--latl">
           <Latl latl={latl} dispatch={dispatch}/>
           <LatlOutput results={results} options={options} dispatch={dispatch}/>
         </div>
@@ -36,7 +36,7 @@ const PhonoChangeApplier = () => {
 
       <Route exact path="/">
         <Link to="/latl">LATL</Link>
-        <div className="PhonoChangeApplier--gui" data-testid="PhonoChangeApplier">
+        <div className="PhonoChangeApplier PhonoChangeApplier--gui" data-testid="PhonoChangeApplier">
           <ProtoLang lexicon={lexicon} dispatch={dispatch}/>
           <Features phones={phones} features={features} dispatch={dispatch}/>
           <Epochs epochs={epochs} errors={errors} dispatch={dispatch} />

src/PhonoChangeApplier.scss

@@ -41,6 +41,12 @@ div.App {
     }
   }
 
+  div.PhonoChangeApplier--latl {
+    display: flex;
+    flex-flow: row wrap;
+    
+  }
+
   button.form, input[type="submit"].form, input[type="button"].form {
     height: 2em;
     border-radius: 0.25em;

src/components/Latl.js

@@ -1,9 +1,16 @@
 import React from 'react';
+import './Latl.scss';
 
 const Latl = ({latl, dispatch}) => {
+  const { innerWidth, innerHeight } = window;
+  console.log(innerWidth, innerHeight)
   return (  
-    <>
+    <div className="Latl">
-    </>
+      <h3>.LATL</h3>
+      <textarea name="latl" id="latl" 
+      cols={'' + Math.floor(innerWidth / 15)} rows={'' + Math.floor(innerHeight / 30)}
+      />
+    </div>
   );
 }
 

src/components/Latl.scss

@@ -0,0 +1,3 @@
+div.Latl {
+  min-width: 80vw;
+}

src/components/LatlOutput.js

@@ -1,9 +1,37 @@
 import React from 'react';
+import './LatlOutput.scss';
 
 const LatlOutput = ({results, options, dispatch}) => {
   return (
-    <>
+    <div className="LatlOutput">
-    </>
+      <h3>Output</h3>
+      <form action={() => {}}>
+        <input 
+          className="form form--remove"
+          type="submit"
+          onClick={e=>{e.preventDefault()}}
+          value="Clear"
+          />
+
+        <input 
+          id="Parse"
+          name="Parse"
+          className="form form--add"
+          type="submit"
+          onClick={e=>{e.preventDefault()}}
+          value="Parse"
+          />
+        
+        <input 
+          id="Run"
+          name="Run"
+          className="form form--add"
+          type="submit"
+          onClick={e=>{e.preventDefault()}}
+          value="Run"
+        />
+      </form>
+    </div>
   );
 }
 

src/components/LatlOutput.scss

@@ -0,0 +1,9 @@
+div.LatlOutput {
+  display: flex;
+  flex-flow: column nowrap;
+
+  form {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, min-max(10em, 1fr));
+  }
+}