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' let testFriends = [ { name: "Liam", role: "engineer", systemAvatar: "1", status: UserStatus.online }, { name: "Emily", role: "engineer", systemAvatar: "2", status: UserStatus.online }, { name: "Paul", role: "architect", systemAvatar: "3", status: UserStatus.online }, { name: "Mark", role: "engineer", systemAvatar: "4", status: UserStatus.busy }, { name: "Adriana", role: "design", systemAvatar: "5", status: UserStatus.busy }, { name: "Josh", role: "design", systemAvatar: "6", status: UserStatus.offline } ] export default class Demo extends React.Component { constructor(props) { super(props); this.state = { selectedChannel: 1 } } statusBubble(status: UserStatus) { console.log(status) switch(status) { case UserStatus.online: return case UserStatus.busy: return case UserStatus.offline: return default: return } } render() { return (

{/* header content */}

{/* welcome message */} 👋Hey Arjun, Good Afternoon! {/* avatar */} profile

{/* personal line */}

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

{friend.name} {friend.status} {friend.role} { this.state.selectedNumber == i ? {i} : {i} } ) }) }

{/* live conversations */}

LIVE CONVERSATIONS

{/* */}

) } }