talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

reusable components for the status and stuff

Browse Source
This commit is contained in:
Arjun Patel
2022-01-16 00:24:14 -08:00
parent d6405dea8f
commit 83a3f43ee5
5 changed files with 87 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Dashboard/TeamVoiceLine.tsx
+3 -44
View File
@@ -20,52 +20,11 @@ import { Collections } from "../../services/collections";
import { KeyCode } from "../../globals/keycode";
import { Tooltip } from "antd";
import { useAudioContext } from "../../contexts/audioContext";
import UserStatusBubble, { UserPulse } from "../UserStatusBubble";
const userService = new UserService();
const db = getFirestore();
function statusBubble(status: UserStatus) {
switch (status) {
case UserStatus.online:
return (
<span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
);
case UserStatus.busy:
return (
<span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
);
case UserStatus.offline:
return (
<span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
);
default:
return (
<span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
);
}
}
function renderPulse(status: UserStatus) {
switch (status) {
case UserStatus.online:
return (
<IoPulseOutline className="text-green-500 text-2xl animate-pulse mx-2 ml-auto" />
);
case UserStatus.busy:
return (
<IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2 ml-auto" />
);
case UserStatus.offline:
return (
<IoRemoveOutline className="text-gray-400 text-2xl mx-2 ml-auto" />
);
default:
return (
<IoPulseOutline className="text-gray-400 text-2xl animate-pulse mx-2 ml-auto" />
);
}
}
const maxNumberOfKeyboardMappings: number = 9;
export default function TeamVoiceLine() {
@@ -177,7 +136,7 @@ export default function TeamVoiceLine() {
<span className="relative flex mr-2">
<span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
{statusBubble(tmember.userStatus)}
<UserStatusBubble status={tmember.userStatus} />
<img
src={tmember.avatarUrl}
@@ -256,7 +215,7 @@ export default function TeamVoiceLine() {
<BsThreeDots className="text-black ml-2 hover:cursor-pointer" />
</>
) : (
<>{renderPulse(tmember.userStatus)}</>
<UserPulse status={tmember.userStatus} />
)}
</span>
);
components/UserStatusBubble.tsx
+49
View File
@@ -0,0 +1,49 @@
import { IoPulseOutline, IoRemoveOutline } from "react-icons/io5";
import { UserStatus } from "../models/user";
interface UserStatusPropsInterface {
status: UserStatus;
}
export default function UserStatusBubble(props: UserStatusPropsInterface) {
switch (props.status) {
case UserStatus.online:
return (
<span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
);
case UserStatus.busy:
return (
<span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
);
case UserStatus.offline:
return (
<span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
);
default:
return (
<span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
);
}
}
// same as status pretty much but prolly less needed for all components
export function UserPulse(props: UserStatusPropsInterface) {
switch (props.status) {
case UserStatus.online:
return (
<IoPulseOutline className="text-green-500 text-2xl animate-pulse mx-2 ml-auto" />
);
case UserStatus.busy:
return (
<IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2 ml-auto" />
);
case UserStatus.offline:
return (
<IoRemoveOutline className="text-gray-400 text-2xl mx-2 ml-auto" />
);
default:
return (
<IoPulseOutline className="text-gray-400 text-2xl animate-pulse mx-2 ml-auto" />
);
}
}