From 1617faf75496193c21134fc3ccb59fd456d1575b Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 11:29:05 +0200
Subject: Create new ErrorMessage component for showing field error messages

---
 src/components/ErrorMessage.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/components/ErrorMessage.tsx

(limited to 'src/components/ErrorMessage.tsx')

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
new file mode 100644
index 0000000..f807817
--- /dev/null
+++ b/src/components/ErrorMessage.tsx
@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/react";
+import colors from "../colors";
+
+interface ErrorMessageProps {
+    show: boolean,
+    message: string
+}
+
+const styles = css`
+  color: ${colors.error};
+  font-size: 20px;
+  line-height: 15px;
+  margin: 10px 0 0;
+`;
+
+export default function ErrorMessage(props: ErrorMessageProps): JSX.Element|null {
+    if (!props.show) {
+        return null;
+    }
+
+    return (
+        <p css={styles}>{props.message}</p>
+    );
+}
-- 
cgit v1.2.3