input length check and component splitting

1 files changed, 30 insertions, 13 deletions

diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
index 777e3c6..d2238af 100644
--- a/frontend/src/components/Inputs.js
+++ b/frontend/src/components/Inputs.js
@@ -1,15 +1,27 @@
 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 (
-            <input
-                name="title"
-                className="lt-shadow"
-                placeholder="Title"
-                type="text"
-                onChange={this.props.onChange}
-                value={this.props.title} />
+            <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>
         );
     }
 }
@@ -17,12 +29,17 @@ class TitleInput extends React.Component {
 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" />
+            <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>
         );
     }
 }