From 602e3101d5662bd3d7764ba27d07ffae72f561d1 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Wed, 12 May 2021 01:40:26 +0100
Subject: [PATCH] Add feature page

---
 src/pages/Feature/index.tsx | 34 ++++++++++++++++++++++++++++++++++
 src/pages/Feature/styles.ts | 12 ++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/pages/Feature/index.tsx
 create mode 100644 src/pages/Feature/styles.ts

diff --git a/src/pages/Feature/index.tsx b/src/pages/Feature/index.tsx
new file mode 100644
index 0000000..41a3cc6
--- /dev/null
+++ b/src/pages/Feature/index.tsx
@@ -0,0 +1,34 @@
+import { useReactiveVar } from '@apollo/client';
+import { Redirect } from 'react-router';
+import { roleVar } from '../../graphql/state';
+import { Empty } from '../../assets';
+import { Box } from '../../components';
+import { Wrapper } from './styles';
+
+const Feature = () => {
+  const role = useReactiveVar(roleVar);
+
+  return role === 'developer' ? (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  ) : (
+    <>
+      {role === 'admin' && <Redirect to='/clients' />}
+      {role === 'client' ||
+        (role === 'productOwner' && <Redirect to='/project' />)}
+    </>
+  );
+};
+
+export default Feature;
diff --git a/src/pages/Feature/styles.ts b/src/pages/Feature/styles.ts
new file mode 100644
index 0000000..bf7ee3d
--- /dev/null
+++ b/src/pages/Feature/styles.ts
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+type WrapperProps = {
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  .empty {
+    fill: ${({ theme, color }) =>
+      color ? theme.colors[color].main : theme.colors.client.main};
+  }
+`;