seeding initial office rooms and showing them

2022-01-22 14:39:01 -08:00
parent 45dbb7c170
commit 9c64e80b08
8 changed files with 272 additions and 3 deletions
@@ -0,0 +1,41 @@
+import { Avatar } from "antd";
+import OfficeRoom, { OfficeRoomState } from "../models/officeRoom";
+
+interface IOfficeCard {
+  officeRoom: OfficeRoom;
+}
+
+export default function OfficeCard(props: IOfficeCard) {
+  return (
+    <span className="flex flex-col">
+      <span className="flex flex-row justify-start items-center">
+        {renderOfficePulse(OfficeRoomState.active)}
+
+        {/* office location name */}
+        <span className="text-gray-200 text-lg font-semibold ml-2">
+          {props.officeRoom.name}
+        </span>
+
+        {/* all members in room */}
+        <span className="ml-auto">
+          <Avatar.Group>
+            {props.officeRoom.members.map((officeLocation) => {
+              <Avatar
+                style={{ backgroundColor: "teal", verticalAlign: "middle" }}
+                className="shadow-xl hover:z-20 hover:cursor-pointer"
+              >
+                {officeLocation[0]}
+              </Avatar>;
+            })}
+          </Avatar.Group>
+        </span>
+      </span>
+    </span>
+  );
+}
+
+function renderOfficePulse(officeRoomState: OfficeRoomState) {
+  return (
+    <span className="h-4 w-4 rounded-full bg-green-500 animate-pulse shadow-lg"></span>
+  );
+}