feat: members page

Signed-off-by: Karthik Ayangar <[email protected]>

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>
   );
 };

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;

src/features/project-members/components/MemberCard.tsx

@@ -0,0 +1,33 @@
+const MemberCard = ({
+  image,
+  name,
+  role,
+}: {
+  image: string;
+  name: string;
+  role: string;
+}) => {
+    const handleRemove = () => {
+        console.log('Remove member');
+    }
+  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'>
+        <div className="select-overlay">
+        <select name='role' id='role' defaultValue={role.toLowerCase()}>
+          <option value='maintainer'>Maintainer</option>
+          <option value='manager'>Manager</option>
+          <option value='member'>Member</option>
+        </select>
+        </div>
+        <button className='member-remove-btn' onClick={handleRemove}>Remove</button>
+      </div>
+    </div>
+  );
+};
+
+export default MemberCard;

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;

src/features/project-members/index.scss

@@ -0,0 +1,167 @@
+.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-overlay {
+        padding-right: 1rem;
+        background: #402aa4;
+        cursor: pointer;
+    }
+    select {
+      border: none;
+      outline: none;
+      color: white;
+      font-size: 1.2rem;
+      padding: 0.6rem 1.4rem;
+      background: #402aa4;
+      cursor: pointer;
+    }
+    option {
+        padding: 1rem;
+        margin: 2rem;
+    }
+  }
+}
+
+@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%;
+  }
+}

src/features/project-members/index.tsx

@@ -1,5 +1,26 @@
+import BackNavigation from './components/BackNavigation';
+import MemberCard from './components/MemberCard';
+import Options from './components/Options';
+import './index.scss';
 const ProjectMembers = () => {
-  return <div>ProjectMembers</div>;
+  // const  member = await fetch('https://api.github.com/orgs/github/public_members');
+  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;