add basic root page

3 files changed, 60 insertions, 6 deletions

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 3614fe1..eeb3e58 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -1,13 +1,12 @@
 import React from 'react';
+import Header from './Header'
+import PasteArea from './PasteArea'
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-      </header>
+    <div className="lt-content-column">
+      <Header />
+      <PasteArea />
     </div>
   );
 }
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
new file mode 100644
index 0000000..1f1f99f
--- /dev/null
+++ b/frontend/src/components/Header.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components'
+
+const SpacedTitle = styled.div`
+    margin-top: 10vh
+`
+
+const Header = () => {
+    return (
+        <SpacedTitle>
+            <h1>
+                <span role="img" aria-label="clipboard">📋&nbsp;</span>
+                ctrl-v
+            </h1>
+            <h3>pastebin but less ass.</h3>
+        </SpacedTitle>
+    );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/frontend/src/components/PasteArea.js b/frontend/src/components/PasteArea.js
new file mode 100644
index 0000000..f7c060c
--- /dev/null
+++ b/frontend/src/components/PasteArea.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+class PasteArea extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { 
+            value: ''
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleChange(event) {
+        this.setState({ value: event.target.value });
+    }
+
+    handleSubmit(event) {
+        alert('paste content: ' + this.state.value);
+        event.preventDefault();
+    }
+
+    render() {
+        return (
+            <form onSubmit={this.handleSubmit}>
+                <textarea placeholder="Paste your text here"
+                    value={this.state.value} onChange={this.handleChange} className="lt-shadow"/>
+                <br></br>
+                <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
+            </form>
+        );
+    }
+}
+
+export default PasteArea
\ No newline at end of file