From 1c3479b99cbdfe6d9bf06389e8bf8ddea15dbfc7 Mon Sep 17 00:00:00 2001
From: Karthik Ayangar <karthik.ayangar7118@gmail.com>
Date: Sat, 20 Jan 2024 21:29:56 +0530
Subject: [PATCH] feat: members page

Signed-off-by: Karthik Ayangar <karthik.ayangar7118@gmail.com>
---
 src/app/routes/BasicRoutes.tsx                |   2 +
 .../components/BackNavigation.tsx             |  39 +++++
 .../project-members/components/MemberCard.tsx |  28 +++
 .../project-members/components/Options.tsx    |  10 ++
 src/features/project-members/index.scss       | 159 ++++++++++++++++++
 src/features/project-members/index.tsx        |  22 ++-
 6 files changed, 259 insertions(+), 1 deletion(-)
 create mode 100644 src/features/project-members/components/BackNavigation.tsx
 create mode 100644 src/features/project-members/components/MemberCard.tsx
 create mode 100644 src/features/project-members/components/Options.tsx

diff --git a/src/app/routes/BasicRoutes.tsx b/src/app/routes/BasicRoutes.tsx
index db615f3..a0e1c76 100644
--- a/src/app/routes/BasicRoutes.tsx
+++ b/src/app/routes/BasicRoutes.tsx
@@ -7,6 +7,7 @@ import WorkspaceView from 'features/workspace-view';
 import Login from 'features/login';
 import AddWorkspace from 'features/AddWorkspace';
 import Workspace from 'features/workspace';
+import ProjectMembers from 'features/project-members';
 const BasicRoutes = () => {
   return (
     <Routes>
@@ -17,6 +18,7 @@ const BasicRoutes = () => {
       <Route path={'/login'} element={<Login />} />
       <Route path={'/addWorkspace'} element={<AddWorkspace />} />
       <Route path={'/*'} element={<Error />} />
+      <Route path={'/testing'} element={<ProjectMembers />} />
     </Routes>
   );
 };
diff --git a/src/features/project-members/components/BackNavigation.tsx b/src/features/project-members/components/BackNavigation.tsx
new file mode 100644
index 0000000..a3c3a33
--- /dev/null
+++ b/src/features/project-members/components/BackNavigation.tsx
@@ -0,0 +1,39 @@
+const BackNavigation = () => {
+  const clickBack = () => {
+    console.log('Back button clicked');
+  };
+  return (
+    <div className='back-title-container' onClick={clickBack}>
+      <button className='button'>
+        <span>
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            width='25'
+            height='20'
+            viewBox='0 0 17 14'
+            fill='none'
+          >
+            <path
+              fill-rule='evenodd'
+              clip-rule='evenodd'
+              d='M6.75811 13.0503C6.48962 13.3188 6.05432 13.3188 5.78584 13.0503L0.221671 7.48618C0.0927395 7.35725 0.0203065 7.18238 0.0203065 7.00004C0.0203065 6.81771 0.0927395 6.64284 0.221671 6.51391L5.78584 0.949741C6.05432 0.681255 6.48962 0.681255 6.75811 0.949741C7.02659 1.21823 7.02659 1.65353 6.75811 1.92201L1.68008 7.00004L6.75811 12.0781C7.02659 12.3466 7.02659 12.7819 6.75811 13.0503Z'
+              fill='white'
+            />
+            <path
+              fill-rule='evenodd'
+              clip-rule='evenodd'
+              d='M16.979 7.00006C16.979 7.37976 16.6712 7.68756 16.2915 7.68756L0.864004 7.68756C0.484308 7.68756 0.176504 7.37976 0.176504 7.00006C0.176504 6.62037 0.484308 6.31256 0.864004 6.31256L16.2915 6.31256C16.6712 6.31256 16.979 6.62036 16.979 7.00006Z'
+              fill='white'
+            />
+          </svg>
+        </span>{' '}
+        Back
+      </button>
+      <h1 className='title'>
+        Organization <span className='arrow'>{'->'}</span> Manage
+      </h1>
+    </div>
+  );
+};
+
+export default BackNavigation;
diff --git a/src/features/project-members/components/MemberCard.tsx b/src/features/project-members/components/MemberCard.tsx
new file mode 100644
index 0000000..92762a4
--- /dev/null
+++ b/src/features/project-members/components/MemberCard.tsx
@@ -0,0 +1,28 @@
+const MemberCard = ({
+  image,
+  name,
+  role,
+}: {
+  image: string;
+  name: string;
+  role: string;
+}) => {
+  return (
+    <div className='member-card'>
+      <div className='member-info'>
+        <img src={image} alt='image' />
+        <h1 className='member-name'>{name}</h1>
+      </div>
+      <div className='member-actions'>
+        <select name='role' id='role' defaultValue={role.toLowerCase()}>
+          <option value='maintainer'>Maintainer</option>
+          <option value='manager'>Manager</option>
+          <option value='member'>Member</option>
+        </select>
+        <button className='member-remove-btn'>Remove</button>
+      </div>
+    </div>
+  );
+};
+
+export default MemberCard;
diff --git a/src/features/project-members/components/Options.tsx b/src/features/project-members/components/Options.tsx
new file mode 100644
index 0000000..d150e54
--- /dev/null
+++ b/src/features/project-members/components/Options.tsx
@@ -0,0 +1,10 @@
+const Options = () => {
+  return (
+    <div className='options'>
+      <button className='add-people button'>Add People</button>
+      <button className='add-people button'>Filter</button>
+    </div>
+  );
+};
+
+export default Options;
diff --git a/src/features/project-members/index.scss b/src/features/project-members/index.scss
index e69de29..eec1ed1 100644
--- a/src/features/project-members/index.scss
+++ b/src/features/project-members/index.scss
@@ -0,0 +1,159 @@
+.members-page-container {
+  margin: 0rem 2rem;
+  margin-top: 2rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  .back-title-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+.options {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.button {
+  outline: none;
+  border: none;
+  color: white;
+  font-size: 1.4rem;
+  padding: 1rem 2rem;
+  border-radius: 3rem;
+  background: #402aa4;
+}
+
+.add-people {
+  font-size: 1.2rem;
+  padding: 0.6rem 1.4rem;
+}
+
+.title {
+  color: rgba(237, 237, 237, 0.7);
+  font-family: Poppins;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 1.6px;
+  text-transform: capitalize;
+  .arrow {
+    color: rgba(237, 237, 237, 0.7);
+    font-family: Poppins;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: -7.6px;
+    text-transform: capitalize;
+  }
+}
+
+.member-view {
+  margin-top: 1rem;
+  width: 60%;
+}
+
+.members-list {
+  background: transparent;
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+.member-card {
+  border-radius: 20px;
+  border: 0.5px solid #406a80;
+  background: #191938;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 2rem;
+  position: relative;
+
+  .member-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 40%;
+    gap: 0.5rem;
+    img {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+    }
+    .member-name {
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      letter-spacing: 1.6px;
+      text-transform: capitalize;
+    }
+  }
+
+  .member-actions {
+    width: 50%;
+    padding: 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    .member-remove-btn {
+      right: 1rem;
+      text-decoration: none;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: #db1b24;
+      font-size: 1.2rem;
+    }
+    select {
+      background: transparent;
+      border: none;
+      outline: none;
+      color: white;
+      font-size: 1.2rem;
+      padding: 0.6rem 1.4rem;
+      // border-radius: 1rem;
+      background: #402aa4;
+    }
+  }
+}
+
+@media only screen and (max-width: 1400px) {
+  .member-view {
+    width: 80%;
+  }
+}
+
+@media only screen and (max-width: 1100px) {
+  .member-card {
+    flex-direction: column;
+    .member-info {
+      width: 100%;
+    }
+    .member-actions {
+      width: 100%;
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .member-view {
+    width: 90%;
+  }
+}
diff --git a/src/features/project-members/index.tsx b/src/features/project-members/index.tsx
index f85cb69..3c43b7a 100644
--- a/src/features/project-members/index.tsx
+++ b/src/features/project-members/index.tsx
@@ -1,5 +1,25 @@
+import BackNavigation from './components/BackNavigation';
+import MemberCard from './components/MemberCard';
+import Options from './components/Options';
+import './index.scss';
 const ProjectMembers = () => {
-  return <div>ProjectMembers</div>;
+  return (
+    <div className='members-page-container'>
+      <BackNavigation />
+      <div className='member-view'>
+        <Options />
+        <div className='members-list'>
+          <MemberCard
+            image={
+              'https://media.licdn.com/dms/image/D4E03AQGI1ZJx1AywYQ/profile-displayphoto-shrink_400_400/0/1665646743847?e=1710979200&v=beta&t=aLom25RLssprCiYXceT78QAtMTFm4Kl_94HoJlZXfTA'
+            }
+            name={'Karthik Ayangar'}
+            role={'member'}
+          />
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default ProjectMembers;