import Head from 'next/head' import Image from 'next/image'; import React from 'react'; import { FaMicrophoneAlt, FaHeadphonesAlt, FaTh } from "react-icons/fa"; import { UserStatus, User } from '../../models/user' import { KeyCode } from '../../globals/keycode' let testFriends = [ { name: "Liam", role: "engineer", systemAvatar: "01", status: UserStatus.online }, { name: "Emily", role: "engineer", systemAvatar: "02", status: UserStatus.online }, { name: "Paul", role: "architect", systemAvatar: "03", status: UserStatus.online }, { name: "Mark", role: "engineer", systemAvatar: "04", status: UserStatus.busy }, { name: "Adriana", role: "design", systemAvatar: "05", status: UserStatus.busy }, { name: "Josh", role: "design", systemAvatar: "06", status: UserStatus.offline } ] export default class Demo extends React.Component { constructor(props) { super(props); this.state = { selectedChannel: null } this.handleKeyboardShortcut = this.handleKeyboardShortcut.bind(this); } componentDidMount(): void { document.addEventListener("keydown", this.handleKeyboardShortcut) } componentWillUnmount(): void { document.removeEventListener("keydown", this.handleKeyboardShortcut); } statusBubble(status: UserStatus): React.Component { console.log(status) switch(status) { case UserStatus.online: return case UserStatus.busy: return case UserStatus.offline: return default: return } } handleKeyboardShortcut(event) { console.log(event.keyCode) switch(event.keyCode) { case KeyCode.Zero: this.setState({ selectedChannel: 0 }); break case KeyCode.One: this.setState({ selectedChannel: 1 }); break case KeyCode.Two: this.setState({ selectedChannel: 2 }); break case KeyCode.Three: this.setState({ selectedChannel: 3 }); break case KeyCode.Four: this.setState({ selectedChannel: 4 }); break case KeyCode.Five: this.setState({ selectedChannel: 5 }); break default: return } } render() { return ( <>

{/* header content */}

{/* welcome message */} 👋Hey Arjun, Good Afternoon! you collabed 1.5 hours and worked 2 hours yesterday {/* avatar */} profile

{/* personal line */}

Team 3 teammates open for collab {/* list of team members */} { testFriends.map((friend, i) => { return ( {this.statusBubble(friend.status)} profile

{friend.name} {friend.role} { this.state.selectedChannel == i ? <> {i} : {i} } ) }) }

{/* announcements */}

ANNOUNCEMENTS

{/* live conversations */}

LIVE CONVERSATIONS

{/* */}

{/* dynamic footer based on selection */}

{this.statusBubble(UserStatus.online)} profile

{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].name} {this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].role} {/* shortcuts */} R SPACE

) } }