Créer/modifier/rejoindre/quitter un groupe de travail

client/src/components/WorkgroupPage/MembersPanel.tsx

@@ -0,0 +1,35 @@
+import React, { FunctionComponent } from 'react';
+import { User } from '../../types/user';
+
+export interface MembersPanelProps {
+  users: User[]
+}
+
+export const MembersPanel: FunctionComponent<MembersPanelProps> = ({ users }) => {
+  return (
+    <nav className="panel">
+      <p className="panel-heading">
+        Membres
+      </p>
+      {
+        users.map(u => {
+          return (
+            <div key={`user-${u.id}`} className="panel-block">
+              <span className="panel-icon">
+                <i className="fas fa-user" aria-hidden="true"></i>
+              </span>
+              <span>{`${ u.name ? u.name : '' } - `}</span><span className="is-italic">{`${u.email}`}</span>
+            </div>
+          );
+        })
+      }
+      {
+        users.length === 0 ?
+        <a className="panel-block has-text-centered is-block">
+          <p className="is-italic">Aucun membre pour l'instant.</p>
+        </a> :
+        null
+      }
+    </nav>
+  );
+}