4 files changed, 59 insertions, 10 deletions

diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index 1f1f99f..a0c5ee8 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -12,7 +12,7 @@ const Header = () => {
                 <span role="img" aria-label="clipboard">📋&nbsp;</span>
                 ctrl-v
             </h1>
-            <h3>pastebin but less ass.</h3>
+            <h3>a modern, <a href="https://github.com/jackyzha0/ctrl-v" target="_blank" rel="noopener noreferrer">open-source</a> pastebin with latex and markdown rendering support</h3>
         </SpacedTitle>
     );
 }
diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
new file mode 100644
index 0000000..777e3c6
--- /dev/null
+++ b/frontend/src/components/Inputs.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+class TitleInput extends React.Component {
+    render() {
+        return (
+            <input
+                name="title"
+                className="lt-shadow"
+                placeholder="Title"
+                type="text"
+                onChange={this.props.onChange}
+                value={this.props.title} />
+        );
+    }
+}
+
+class PasteInput extends React.Component {
+    render() {
+        return (
+            <textarea
+                name="content"
+                placeholder="Paste your text here"
+                value={this.props.content}
+                onChange={this.props.onChange}
+                className="lt-shadow" />
+        );
+    }
+}
+
+export { TitleInput, PasteInput }
\ No newline at end of file
diff --git a/frontend/src/components/PasteArea.js b/frontend/src/components/PasteArea.js
index f7c060c..fb3db64 100644
--- a/frontend/src/components/PasteArea.js
+++ b/frontend/src/components/PasteArea.js
@@ -1,10 +1,12 @@
 import React from 'react';
+import { TitleInput, PasteInput } from './Inputs'
 
 class PasteArea extends React.Component {
     constructor(props) {
         super(props);
         this.state = { 
-            value: ''
+            title: '',
+            content: '',
         };
 
         this.handleChange = this.handleChange.bind(this);
@@ -12,20 +14,30 @@ class PasteArea extends React.Component {
     }
 
     handleChange(event) {
-        this.setState({ value: event.target.value });
+        const target = event.target;
+        const name = target.name;
+
+        this.setState({
+            [name]: target.value
+        });
     }
 
     handleSubmit(event) {
-        alert('paste content: ' + this.state.value);
+        console.log(`title: ${this.state.title}`)
+        console.log(`content: ${this.state.content}`)
         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>
+                <TitleInput 
+                    onChange={this.handleChange}
+                    value={this.state.title} />
+                <PasteInput
+                    onChange={this.handleChange}
+                    content={this.state.content} />
+                <br />
                 <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
             </form>
         );
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index 3ef5b53..9a5a149 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -14,21 +14,28 @@ form {
   width: 100%;
 }
 
-textarea {
+textarea, input[type=text] {
   width: 100%;
-  height: 60vh;
   font-family: 'Roboto Mono', monospace;
   font-size: 0.8em;
   padding: 0.8em;
   border-radius: 3px;
   border: 1px solid #565656;
   outline: none;
+  margin-bottom: 1.5em;
+}
+
+textarea {
+  height: 50vh;
+}
+
+a {
+  color: #111111;
 }
 
 input[type=submit] {
   font-family: 'Lora', serif;
   font-weight: 700;
-  margin: 1.5em 0;
   color: #faf9f5;
   background-color: #111111;
 }