feat: members page

Signed-off-by: Karthik Ayangar <[email protected]>
mdgspace · Jan 20, 2024 · 1c3479b · 1c3479b
1 parent a2d34b4
commit 1c3479b
Show file tree

Hide file tree

Showing 6 changed files with 259 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;