Display invalid information for TextArea

1 files changed, 18 insertions, 2 deletions

diff --git a/src/components/InputTypes/TextArea.tsx b/src/components/InputTypes/TextArea.tsx
index 40547bb..a09ce8a 100644
--- a/src/components/InputTypes/TextArea.tsx
+++ b/src/components/InputTypes/TextArea.tsx
@@ -2,10 +2,14 @@
 import { jsx, css } from "@emotion/react";
 import React, { ChangeEvent } from "react";
 import { textInputs } from "../../commonStyles";
+import ErrorMessage from "../ErrorMessage";
+import colors from "../../colors";
 
 interface TextAreaProps {
     handler: (event: ChangeEvent<HTMLTextAreaElement>) => void,
-    required: boolean
+    required: boolean,
+    valid: boolean,
+    error: string
 }
 
 const styles = css`
@@ -17,6 +21,18 @@ const styles = css`
   padding: 1rem;
 `;
 
+const invalidStyles = css`
+  .invalid-box {
+    box-shadow: 0 0 10px ${colors.error};
+    border: none;
+  }
+`;
+
 export default function TextArea(props: TextAreaProps): JSX.Element {
-    return <textarea css={[textInputs, styles]} placeholder="Enter Text..." onChange={props.handler}/>;
+    return (
+        <div css={invalidStyles}>
+            <textarea css={[textInputs, styles]} placeholder="Enter Text..." onChange={props.handler} className={!props.valid ? "invalid-box" : ""} required={props.required}/>
+            <ErrorMessage show={!props.valid} message={props.error}/>
+        </div>
+    );
 }