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

Update demo.tsx

Browse Source
This commit is contained in:
Arjun Patel
2022-01-10 00:21:20 -08:00
parent 55c5fb9df3
commit 29fd6b8325
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/teams/demo.tsx
+12 -12
View File
@@ -9,37 +9,37 @@ let testFriends = [
{ {
name: "Liam", name: "Liam",
role: "engineer", role: "engineer",
systemAvatar: "1", systemAvatar: "01",
status: UserStatus.online status: UserStatus.online
}, },
{ {
name: "Emily", name: "Emily",
role: "engineer", role: "engineer",
systemAvatar: "2", systemAvatar: "02",
status: UserStatus.online status: UserStatus.online
}, },
{ {
name: "Paul", name: "Paul",
role: "architect", role: "architect",
systemAvatar: "3", systemAvatar: "03",
status: UserStatus.online status: UserStatus.online
}, },
{ {
name: "Mark", name: "Mark",
role: "engineer", role: "engineer",
systemAvatar: "4", systemAvatar: "04",
status: UserStatus.busy status: UserStatus.busy
}, },
{ {
name: "Adriana", name: "Adriana",
role: "design", role: "design",
systemAvatar: "5", systemAvatar: "05",
status: UserStatus.busy status: UserStatus.busy
}, },
{ {
name: "Josh", name: "Josh",
role: "design", role: "design",
systemAvatar: "6", systemAvatar: "06",
status: UserStatus.offline status: UserStatus.offline
} }
] ]
@@ -48,7 +48,7 @@ export default class Demo extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
selectedChannel: 1 selectedChannel: null
} }
this.handleKeyboardShortcut = this.handleKeyboardShortcut.bind(this); this.handleKeyboardShortcut = this.handleKeyboardShortcut.bind(this);
@@ -172,7 +172,7 @@ export default class Demo extends React.Component {
{this.statusBubble(friend.status)} {this.statusBubble(friend.status)}
<Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} /> <Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" + (friend.systemAvatar) + ".svg"} alt="profile" width={50} height={50} />
</span> </span>
<span className='flex flex-col'> <span className='flex flex-col'>
@@ -219,20 +219,20 @@ export default class Demo extends React.Component {
<div className='fixed bottom-10 w-full'> <div className='fixed bottom-10 w-full'>
{/* dynamic footer based on selection */} {/* dynamic footer based on selection */}
<section className='flex flex-row bg-gray-300 max-w-screen-md mx-auto p-5 shadow-xl rounded-xl justify-between'> <section className={"flex flex-row bg-gray-300 max-w-screen-md mx-auto p-5 shadow-xl rounded-xl justify-between ease-in-out duration-300 scale-0" + (this.state.selectedChannel != null ? "scale-100" : " ")}>
<span className='flex flex-row'> <span className='flex flex-row'>
<span className='relative flex mr-2'> <span className='relative flex mr-2'>
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span> <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
{this.statusBubble(UserStatus.online)} {this.statusBubble(UserStatus.online)}
<Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} /> <Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" + (this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].systemAvatar) + ".svg"} alt="profile" width={50} height={50} />
</span> </span>
<span className='flex flex-col'> <span className='flex flex-col'>
<font className="text-sm text-black font-bold">{testFriends[this.state.selectedChannel].name} </font> <font className="text-sm text-black font-bold">{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].name} </font>
<font className={"text-xs font-sans text-gray-300 text-black"}>{testFriends[this.state.selectedChannel].role}</font> <font className={"text-xs font-sans text-gray-300 text-black"}>{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].role}</font>
</span> </span>
</span> </span>