Implement validation to ShortText component

1 files changed, 9 insertions, 4 deletions

diff --git a/src/components/InputTypes/ShortText.tsx b/src/components/InputTypes/ShortText.tsx
index d34bd01..5509a45 100644
--- a/src/components/InputTypes/ShortText.tsx
+++ b/src/components/InputTypes/ShortText.tsx
@@ -1,13 +1,18 @@
 /** @jsx jsx */
 import { jsx } from "@emotion/react";
-import React, { ChangeEvent } from "react";
-import { textInputs } from "../../commonStyles";
+import React, { ChangeEvent, FocusEvent } from "react";
+import { textInputs, invalidStyles } from "../../commonStyles";
 
 interface ShortTextProps {
     handler: (event: ChangeEvent<HTMLInputElement>) => void,
-    required: boolean
+    blurHandler: (event: FocusEvent<HTMLInputElement>) => void,
+    valid: boolean
 }
 
 export default function ShortText(props: ShortTextProps): JSX.Element {
-    return <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler}/>;
+    return (
+        <div css={invalidStyles}>
+            <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler} onBlur={props.blurHandler} className={!props.valid ? "invalid-box" : ""}/>
+        </div>
+    );
 }