import Head from 'next/head' import Image from 'next/image'; import React from 'react'; import { FaMicrophoneAlt, FaHeadphonesAlt, FaTh } from "react-icons/fa"; let testFriends = [ { name: "Liam", role: "engineer", systemAvatar: "1", status: "online" }, { name: "Emily", role: "engineer", systemAvatar: "2", status: "online" }, { name: "Paul", role: "architect", systemAvatar: "3", status: "online" }, { name: "Mark", role: "engineer", systemAvatar: "4", status: "busy" }, { name: "Adriana", role: "design", systemAvatar: "5", status: "busy" }, { name: "Josh", role: "design", systemAvatar: "6", status: "offline" } ] export default class Demo extends React.Component { constructor(props) { super(props); this.state = { selectedChannel: 1 } } statusBubble(status) { } 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) => { console.log(friend) return ( profile

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

{/* live conversations */}

LIVE CONVERSATIONS

{/* */}

) } }