starting to implement create ui/ux flow

packages/web/components/UserDetails/SimpleUserDetailsRow.tsx

@@ -1,61 +1,25 @@
 import { Avatar } from "antd";
 import { FaPaperPlane, FaRegTimesCircle } from "react-icons/fa";
-import User from "@nirvana/common/models/user";
+import { User } from "@nirvana/common/models/user";
+import UserAvatar from "./UserAvatar";
 
 export default function SelectedUserRow(props: { user: User }) {
-  console.log(props);
   return (
-    <>
-      <span className="flex flex-row items-center py-1 border-t">
-        <Avatar shape="square" size={"small"}>
-          A
-        </Avatar>
+    <span className="flex flex-row items-center py-1 border-t">
+      <UserAvatar
+        userFirstName={props.user.firstName}
+        avatarUrl={props.user.avatarUrl}
+        status={props.user.userStatus}
+      />
 
-        <span className="flex flex-col ml-2">
-          <span className="text-slate-400 text-xs">
-            {"ariel@microsoft.com"}
-          </span>
-          <span className="text-orange-500 text-xs">
-            Not a valid Nirvana user.
-          </span>
-        </span>
-
-        <button className="p-2 rounded-full hover:cursor-pointer text-sky-500 ml-auto">
-          <FaPaperPlane className="ml-auto text-lg" />
-        </button>
+      <span className="flex flex-col ml-2">
+        <span className="text-teal-500 font-bold">{"Joe Smoe"}</span>
+        <span className="text-slate-400 text-xs">{"joe@microsoft.com"}</span>
       </span>
-      <span className="flex flex-row items-center py-1 border-t">
-        <Avatar
-          src={"https://joeschmoe.io/api/v1/random"}
-          shape="square"
-          size={"small"}
-        />
 
-        <span className="flex flex-col ml-2">
-          <span className="text-teal-500 font-bold">{"Joe Smoe"}</span>
-          <span className="text-slate-400 text-xs">{"[email protected]"}</span>
-        </span>
-
-        <button className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto">
-          <FaRegTimesCircle className="ml-auto text-lg" />
-        </button>
-      </span>
-      <span className="flex flex-row items-center py-1 border-t">
-        <Avatar
-          src={"https://joeschmoe.io/api/v1/2"}
-          shape="square"
-          size={"small"}
-        />
-
-        <span className="flex flex-col ml-2">
-          <span className="text-teal-500 font-bold">{"Elon Musk"}</span>
-          <span className="text-slate-400 text-xs">{"[email protected]"}</span>
-        </span>
-
-        <button className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto">
-          <FaRegTimesCircle className="ml-auto text-lg" />
-        </button>
-      </span>
-    </>
+      <button className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto">
+        <FaRegTimesCircle className="ml-auto text-lg" />
+      </button>
+    </span>
   );
 }

packages/web/components/UserDetails/UserAvatar.tsx

@@ -0,0 +1,35 @@
+import { UserStatus } from "@nirvana/common/models/user";
+import { Badge } from "antd";
+import Avatar from "antd/lib/avatar/avatar";
+
+export enum UserAvatarSizes {
+  small = "small",
+  large = "large",
+  default = "default",
+}
+export default function UserAvatar(props: {
+  userFirstName: string;
+  avatarUrl?: string;
+  size?: UserAvatarSizes;
+  status: UserStatus;
+}) {
+  if (props.avatarUrl) {
+    return (
+      <Badge dot>
+        <Avatar
+          shape="square"
+          src={props.avatarUrl}
+          size={props.size || UserAvatarSizes.default}
+        />
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge dot>
+      <Avatar shape="square" size={props.size || UserAvatarSizes.default}>
+        {props.userFirstName}
+      </Avatar>
+    </Badge>
+  );
+}