add sidebar boilerplate

src/App.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import "./styles.css";
 
@@ -11,10 +11,39 @@ import { ThemeProvider } from "@emotion/react";
 import Theme from "./Theme";
 
 import "./style/App.css";
+import Sidebar from "./components/sidebar/Sidebar";
+import { MeetingStatus, SidebarUserObj } from "./components/sidebar/SidebarUser";
 
 const App: React.FC = () => {
+
+  /* Temporary data */
+  const [sidebarUsers] = useState<SidebarUserObj[]>([
+    { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE },
+    { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
+    { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.AWAY },
+    { id: 4, name: "Bob B.", meetingStatus: MeetingStatus.IN_MEETING },
+    { id: 5, name: "Bob C.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 6, name: "Bob D.", meetingStatus: MeetingStatus.ONLINE },
+    { id: 7, name: "Bob E.", meetingStatus: MeetingStatus.AWAY },
+    { id: 8, name: "Bob F.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 9, name: "Bob G.", meetingStatus: MeetingStatus.ONLINE },
+    { id: 10, name: "Bob H.", meetingStatus: MeetingStatus.AWAY },
+    { id: 11, name: "Bob I.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 12, name: "Bob J.", meetingStatus: MeetingStatus.AWAY },
+    { id: 13, name: "Bob K.", meetingStatus: MeetingStatus.IN_MEETING },
+    { id: 14, name: "Bob L.", meetingStatus: MeetingStatus.IN_MEETING },
+    { id: 15, name: "Bob M.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 16, name: "Bob N.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 17, name: "Bob O.", meetingStatus: MeetingStatus.AWAY },
+    { id: 18, name: "Bob P.", meetingStatus: MeetingStatus.AWAY },
+    { id: 19, name: "Bob Q.", meetingStatus: MeetingStatus.ONLINE },
+    { id: 20, name: "Bob R.", meetingStatus: MeetingStatus.ONLINE },
+  ]);
+
   return (
     <ThemeProvider theme={Theme}>
+      <Sidebar users={sidebarUsers} />
       <Router>
         <Navbar />
         <Routes>

src/components/sidebar/GroupSelect.tsx

@@ -0,0 +1,8 @@
+
+const GroupSelect: React.FC = () => {
+  return (
+    <div>GroupSelect</div>
+  );
+};
+
+export default GroupSelect;

src/components/sidebar/Sidebar.tsx

@@ -1,5 +1,20 @@
-const Sidebar: React.FC = () => {
+import { Box } from "@mui/material";
-  return <span>Sidebar</span>;
+import SidebarUser, { SidebarUserObj } from "./SidebarUser";
+
+interface Props {
+  users: SidebarUserObj[],
+}
+
+const Sidebar: React.FC<Props> = ({ users }: Props) => {
+  return (
+    <Box>
+      {users.map((user) => (
+        <div key={user.id}>
+          <SidebarUser user={user} />
+        </div>
+      ))}
+    </Box>
+  );
 };
 
 export default Sidebar;

src/components/sidebar/SidebarUser.tsx

@@ -0,0 +1,64 @@
+import { Box } from "@mui/material";
+
+export interface SidebarUserObj {
+  id: number,
+  name: string,
+  meetingStatus: MeetingStatus;
+}
+
+export const enum MeetingStatus {
+  OFFLINE = 0,
+  ONLINE = 1,
+  AWAY = 2,
+  IN_MEETING = 3
+}
+
+const getMeetingStatusText = (ms: MeetingStatus): string => {
+  switch (ms) {
+    case MeetingStatus.OFFLINE: {
+      return "Offline";
+    }
+    case MeetingStatus.ONLINE: {
+      return "Online";
+    }
+    case MeetingStatus.AWAY: {
+      return "Away";
+    }
+    case MeetingStatus.IN_MEETING: {
+      return "In meeting";
+    }
+  }
+};
+
+const getStatusColor = (ms: MeetingStatus): string => {
+  switch (ms) {
+    case MeetingStatus.OFFLINE: {
+      return "#b8b8b8";
+    }
+    case MeetingStatus.ONLINE: {
+      return "#70ff70";
+    }
+    case MeetingStatus.AWAY: {
+      return "#ff7070";
+    }
+    case MeetingStatus.IN_MEETING: {
+      return "#baba34";
+    }
+  }
+};
+
+interface Props {
+  user: SidebarUserObj;
+}
+
+const SidebarUser: React.FC<Props> = ({ user }: Props) => {
+  return (
+    <Box>
+      {user.name}
+      {getStatusColor(user.meetingStatus)}
+      {getMeetingStatusText(user.meetingStatus)}
+    </Box>
+  );
+};
+
+export default SidebarUser;