bunch fo data input from the selectors and all it organized

-> bug check for selectors but just create bunch of convos
2022-02-03 23:55:07 -08:00
parent 479250c900
commit 322df9211d
3 changed files with 137 additions and 291 deletions
@@ -0,0 +1,63 @@
+import Conversation from "@nirvana/common/models/conversation";
+import { Avatar } from "antd";
+import {
+  FaCircle,
+  FaUser,
+  FaRocket,
+  FaRegClock,
+  FaCheck,
+  FaAngleRight,
+} from "react-icons/fa";
+import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
+
+export default function ConversationFullRow(props: {
+  conversation: Conversation;
+}) {
+  let quickUpdateText = "";
+
+  if (props.conversation.cachedAudioClips?.length > 0) {
+    quickUpdateText = `${props.conversation.cachedAudioClips[0].senderUserId} spoke just now...`;
+  }
+
+  return (
+    <span
+      className="py-5 px-4 border-t border-t-slate-200 flex flex-row hover:bg-slate-50 transition-all
+   items-center"
+    >
+      <FaCircle className="text-orange-500 mr-2 animate-pulse text-[0.75rem]" />
+
+      <span className="w-[15rem] flex flex-row items-center">
+        <MasterAvatarGroupWithUserFetch
+          listOfUserIds={props.conversation.activeMembers}
+          showCurrUser={false}
+        />
+
+        <span className="text-slate-500 ml-2">{props.conversation.name}</span>
+      </span>
+
+      <span className="text-slate-300 w-[20rem] truncate text-sm">
+        {quickUpdateText}
+      </span>
+
+      <span className="ml-auto text-slate-300 text-sm group-hover:invisible">
+        9:00am
+      </span>
+
+      {/* actions */}
+      <span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
+        <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+          <FaRocket className="ml-auto text-lg" />
+        </span>
+        <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+          <FaRegClock className="ml-auto text-lg" />
+        </span>
+        <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+          <FaCheck className="ml-auto text-lg" />
+        </span>
+        <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+          <FaAngleRight className="ml-auto text-lg" />
+        </span>
+      </span>
+    </span>
+  );
+}