From 69bb70e52a45fb320e6c5287708a4499ee936b06 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Wed, 21 Apr 2021 21:29:50 +0100
Subject: [PATCH] Complete alert component

---
 src/components/Alert/index.tsx | 17 +++++++-
 src/components/Alert/styles.ts | 73 +++++++++++++++++++++++++++++++++-
 src/components/index.tsx       |  2 +
 3 files changed, 88 insertions(+), 4 deletions(-)

diff --git a/src/components/Alert/index.tsx b/src/components/Alert/index.tsx
index 1c52f0a..eb637c3 100644
--- a/src/components/Alert/index.tsx
+++ b/src/components/Alert/index.tsx
@@ -1,7 +1,20 @@
 import { Wrapper } from './styles';
 
-const Alert = () => {
-  return <Wrapper></Wrapper>;
+type AlertProps = {
+  className?: string;
+  color:
+    | 'client'
+    | 'productOwner'
+    | 'developer'
+    | 'admin'
+    | 'success'
+    | 'warning'
+    | 'error';
+  text: string;
+};
+
+const Alert = ({ text, ...props }: AlertProps) => {
+  return <Wrapper {...props}>{text}</Wrapper>;
 };
 
 export default Alert;
diff --git a/src/components/Alert/styles.ts b/src/components/Alert/styles.ts
index 14ea300..c1ace9e 100644
--- a/src/components/Alert/styles.ts
+++ b/src/components/Alert/styles.ts
@@ -1,3 +1,72 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Wrapper = styled.div``;
+type WrapperProps = {
+  color:
+    | 'client'
+    | 'productOwner'
+    | 'developer'
+    | 'admin'
+    | 'success'
+    | 'warning'
+    | 'error';
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  width: 100%;
+  height: auto;
+  padding: 0.938rem;
+  border-radius: 10px;
+
+  ${({ color, theme }) => {
+    switch (color) {
+      case 'client':
+        return css`
+          border: 1px solid ${theme.colors.client.main};
+          color: ${theme.colors.client.main};
+          background: ${theme.colors.client.light};
+        `;
+      case 'productOwner':
+        return css`
+          border: 1px solid ${theme.colors.productOwner.main};
+          color: ${theme.colors.productOwner.main};
+          background: ${theme.colors.productOwner.light};
+        `;
+      case 'developer':
+        return css`
+          border: 1px solid ${theme.colors.developer.main};
+          color: ${theme.colors.developer.main};
+          background: ${theme.colors.developer.light};
+        `;
+      case 'admin':
+        return css`
+          border: 1px solid ${theme.colors.admin.main};
+          color: ${theme.colors.admin.main};
+          background: ${theme.colors.admin.light};
+        `;
+      case 'success':
+        return css`
+          border: 1px solid ${theme.colors.success.main};
+          color: ${theme.colors.success.main};
+          background: ${theme.colors.success.light};
+        `;
+      case 'warning':
+        return css`
+          border: 1px solid ${theme.colors.warning.main};
+          color: ${theme.colors.warning.main};
+          background: ${theme.colors.warning.light};
+        `;
+      case 'error':
+        return css`
+          border: 1px solid ${theme.colors.error.main};
+          color: ${theme.colors.error.main};
+          background: ${theme.colors.error.light};
+        `;
+      default:
+        return css`
+          border: 1px solid ${theme.colors.client.main};
+          color: ${theme.colors.client.main};
+          background: ${theme.colors.client.light};
+        `;
+    }
+  }}
+`;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index b26e9a5..c778de9 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -10,6 +10,7 @@ import Search from './Search';
 import Avatar from './Avatar';
 import ContextMenu from './ContextMenu';
 import Spinner from './Spinner';
+import Alert from './Alert';
 
 export {
   Button,
@@ -24,4 +25,5 @@ export {
   Avatar,
   ContextMenu,
   Spinner,
+  Alert,
 };