Merge pull request #8 from jackyzha0/react

more react changes

1 files changed, 47 insertions, 0 deletions

diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
new file mode 100644
index 0000000..d2238af
--- /dev/null
+++ b/frontend/src/components/Inputs.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import CharLimit from './CharLimit'
+import styled from 'styled-components'
+
+const CharLimitContainer = styled.div`
+    position: relative; 
+`
+
+class TitleInput extends React.Component {
+    render() {
+        return (
+            <CharLimitContainer>
+                <input
+                    name="title"
+                    className="lt-shadow"
+                    placeholder="Title"
+                    type="text"
+                    autoComplete="off"
+                    onChange={this.props.onChange}
+                    value={this.props.value} />
+                <CharLimit
+                    content={this.props.value}
+                    maxLength={this.props.maxLength} />
+            </CharLimitContainer>
+        );
+    }
+}
+
+class PasteInput extends React.Component {
+    render() {
+        return (
+            <CharLimitContainer>
+                <textarea
+                    name="content"
+                    placeholder="Paste your text here"
+                    value={this.props.content}
+                    onChange={this.props.onChange}
+                    className="lt-shadow" />
+                <CharLimit
+                    content={this.props.content}
+                    maxLength={this.props.maxLength} />
+            </CharLimitContainer>
+        );
+    }
+}
+
+export { TitleInput, PasteInput }
\ No newline at end of file