From 22c58b4d7d864414c599761f92212a5825003950 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sun, 10 May 2020 00:25:31 -0700
Subject: input length check and component splitting

---
 frontend/src/components/Inputs.js | 43 +++++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 13 deletions(-)

(limited to 'frontend/src/components/Inputs.js')

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>
         );
     }
 }
-- 
cgit v1.2.3