adding footer and other things with animated change of user
This commit is contained in:
Arjun Patel
@@ -0,0 +1,127 @@
|
|||||||
|
export enum KeyCode {
|
||||||
|
Backspace = 8,
|
||||||
|
Tab = 9,
|
||||||
|
Enter = 13,
|
||||||
|
Shift = 16,
|
||||||
|
Ctrl = 17,
|
||||||
|
Alt = 18,
|
||||||
|
PauseBreak = 19,
|
||||||
|
CapsLock = 20,
|
||||||
|
Escape = 27,
|
||||||
|
Space = 32,
|
||||||
|
PageUp = 33,
|
||||||
|
PageDown = 34,
|
||||||
|
End = 35,
|
||||||
|
Home = 36,
|
||||||
|
|
||||||
|
LeftArrow = 37,
|
||||||
|
UpArrow = 38,
|
||||||
|
RightArrow = 39,
|
||||||
|
DownArrow = 40,
|
||||||
|
|
||||||
|
Insert = 45,
|
||||||
|
Delete = 46,
|
||||||
|
|
||||||
|
Zero = 48,
|
||||||
|
ClosedParen = Zero,
|
||||||
|
One = 49,
|
||||||
|
ExclamationMark = One,
|
||||||
|
Two = 50,
|
||||||
|
AtSign = Two,
|
||||||
|
Three = 51,
|
||||||
|
PoundSign = Three,
|
||||||
|
Hash = PoundSign,
|
||||||
|
Four = 52,
|
||||||
|
DollarSign = Four,
|
||||||
|
Five = 53,
|
||||||
|
PercentSign = Five,
|
||||||
|
Six = 54,
|
||||||
|
Caret = Six,
|
||||||
|
Hat = Caret,
|
||||||
|
Seven = 55,
|
||||||
|
Ampersand = Seven,
|
||||||
|
Eight = 56,
|
||||||
|
Star = Eight,
|
||||||
|
Asterik = Star,
|
||||||
|
Nine = 57,
|
||||||
|
OpenParen = Nine,
|
||||||
|
|
||||||
|
A = 65,
|
||||||
|
B = 66,
|
||||||
|
C = 67,
|
||||||
|
D = 68,
|
||||||
|
E = 69,
|
||||||
|
F = 70,
|
||||||
|
G = 71,
|
||||||
|
H = 72,
|
||||||
|
I = 73,
|
||||||
|
J = 74,
|
||||||
|
K = 75,
|
||||||
|
L = 76,
|
||||||
|
M = 77,
|
||||||
|
N = 78,
|
||||||
|
O = 79,
|
||||||
|
P = 80,
|
||||||
|
Q = 81,
|
||||||
|
R = 82,
|
||||||
|
S = 83,
|
||||||
|
T = 84,
|
||||||
|
U = 85,
|
||||||
|
V = 86,
|
||||||
|
W = 87,
|
||||||
|
X = 88,
|
||||||
|
Y = 89,
|
||||||
|
Z = 90,
|
||||||
|
|
||||||
|
LeftWindowKey = 91,
|
||||||
|
RightWindowKey = 92,
|
||||||
|
SelectKey = 93,
|
||||||
|
|
||||||
|
Numpad0 = 96,
|
||||||
|
Numpad1 = 97,
|
||||||
|
Numpad2 = 98,
|
||||||
|
Numpad3 = 99,
|
||||||
|
Numpad4 = 100,
|
||||||
|
Numpad5 = 101,
|
||||||
|
Numpad6 = 102,
|
||||||
|
Numpad7 = 103,
|
||||||
|
Numpad8 = 104,
|
||||||
|
Numpad9 = 105,
|
||||||
|
|
||||||
|
Multiply = 106,
|
||||||
|
Add = 107,
|
||||||
|
Subtract = 109,
|
||||||
|
DecimalPoint = 110,
|
||||||
|
Divide = 111,
|
||||||
|
|
||||||
|
F1 = 112,
|
||||||
|
F2 = 113,
|
||||||
|
F3 = 114,
|
||||||
|
F4 = 115,
|
||||||
|
F5 = 116,
|
||||||
|
F6 = 117,
|
||||||
|
F7 = 118,
|
||||||
|
F8 = 119,
|
||||||
|
F9 = 120,
|
||||||
|
F10 = 121,
|
||||||
|
F11 = 122,
|
||||||
|
F12 = 123,
|
||||||
|
|
||||||
|
NumLock = 144,
|
||||||
|
ScrollLock = 145,
|
||||||
|
|
||||||
|
SemiColon = 186,
|
||||||
|
Equals = 187,
|
||||||
|
Comma = 188,
|
||||||
|
Dash = 189,
|
||||||
|
Period = 190,
|
||||||
|
UnderScore = Dash,
|
||||||
|
PlusSign = Equals,
|
||||||
|
ForwardSlash = 191,
|
||||||
|
Tilde = 192,
|
||||||
|
GraveAccent = Tilde,
|
||||||
|
|
||||||
|
OpenBracket = 219,
|
||||||
|
ClosedBracket = 221,
|
||||||
|
Quote = 222
|
||||||
|
}
|
||||||
+172
-85
@@ -3,6 +3,7 @@ import Image from 'next/image';
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { FaMicrophoneAlt, FaHeadphonesAlt, FaTh } from "react-icons/fa";
|
import { FaMicrophoneAlt, FaHeadphonesAlt, FaTh } from "react-icons/fa";
|
||||||
import { UserStatus, User } from '../../models/user'
|
import { UserStatus, User } from '../../models/user'
|
||||||
|
import { KeyCode } from '../../globals/keycode'
|
||||||
|
|
||||||
let testFriends = [
|
let testFriends = [
|
||||||
{
|
{
|
||||||
@@ -49,9 +50,19 @@ export default class Demo extends React.Component {
|
|||||||
this.state = {
|
this.state = {
|
||||||
selectedChannel: 1
|
selectedChannel: 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.handleKeyboardShortcut = this.handleKeyboardShortcut.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
statusBubble(status: UserStatus) {
|
componentDidMount(): void {
|
||||||
|
document.addEventListener("keydown", this.handleKeyboardShortcut)
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount(): void {
|
||||||
|
// this.removeEventListener("keydown", this.handleKeyboardShortcut);
|
||||||
|
}
|
||||||
|
|
||||||
|
statusBubble(status: UserStatus): React.Component {
|
||||||
console.log(status)
|
console.log(status)
|
||||||
|
|
||||||
switch(status) {
|
switch(status) {
|
||||||
@@ -66,102 +77,178 @@ export default class Demo extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto max-w-screen-xl pt-10 flex flex-col">
|
<>
|
||||||
<Head>
|
<div className="container mx-auto max-w-screen-xl pt-10 flex flex-col">
|
||||||
<link
|
<Head>
|
||||||
href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap"
|
<link
|
||||||
rel="stylesheet"
|
href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap"
|
||||||
/>
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap"
|
<link
|
||||||
rel="stylesheet"
|
href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap"
|
||||||
/>
|
rel="stylesheet"
|
||||||
</Head>
|
/>
|
||||||
|
</Head>
|
||||||
{/* header content */}
|
|
||||||
<section className="flex-1 flex flex-row items-center justify-between py-5">
|
|
||||||
{/* welcome message */}
|
|
||||||
<span className='flex flex-col'>
|
|
||||||
<font className="font-sans font-bold text-xl">👋Hey Arjun, Good Afternoon!</font>
|
|
||||||
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* avatar */}
|
{/* header content */}
|
||||||
<span className="flex flex-row items-center space-x-5">
|
<section className="flex-1 flex flex-row items-center justify-between py-5">
|
||||||
<FaHeadphonesAlt className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
|
{/* welcome message */}
|
||||||
<FaMicrophoneAlt className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
|
<span className='flex flex-col'>
|
||||||
<FaTh className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
|
<font className="font-sans font-bold text-xl">👋Hey Arjun, Good Afternoon!</font>
|
||||||
<span className='relative flex'>
|
|
||||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
|
||||||
<span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
|
|
||||||
<Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className='flex flex-row items-baseline space-x-5'>
|
|
||||||
{/* personal line */}
|
|
||||||
<section className='flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
|
|
||||||
<span className='p-5 flex flex-col'>
|
|
||||||
<span className="text-gray-300">PERSONAL LINE</span>
|
|
||||||
<font className="font-sans text-sm text-gray-400 pt-2">
|
|
||||||
<font className="rounded-full p-1 bg-opacity-30 bg-teal-700 text-teal-700 font-bold">3</font> teammates open for collab</font>
|
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{/* list of team members */}
|
{/* avatar */}
|
||||||
{
|
<span className="flex flex-row items-center space-x-5">
|
||||||
testFriends.map((friend, i) => {
|
<FaHeadphonesAlt className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
|
||||||
return (
|
<FaMicrophoneAlt className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
|
||||||
<span key={i} className={`flex flex-row items-center border-t-2 py-2 px-2 justify-items-start w-60${this.state.selectedNumber == i ? "bg-gray-300" : " "}`}>
|
<FaTh className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
|
||||||
<span className='relative flex mr-2'>
|
<span className='relative flex'>
|
||||||
<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>
|
||||||
|
<span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
|
||||||
{this.statusBubble(friend.status)}
|
<Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
|
||||||
|
</span>
|
||||||
<Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
|
</span>
|
||||||
</span>
|
|
||||||
|
|
||||||
<span className='flex flex-col'>
|
|
||||||
<font className="text-sm text-black font-bold">{friend.name} {friend.status}</font>
|
|
||||||
|
|
||||||
<font className="text-gray-300 text-xs font-sans">{friend.role}</font>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{
|
|
||||||
this.state.selectedNumber == i ?
|
|
||||||
<span className="rounded-lg p-2 ml-auto border border-gray-300 shadow-lg">
|
|
||||||
<font className="text-gray-200">{i}</font>
|
|
||||||
</span>
|
|
||||||
:
|
|
||||||
<span className="rounded-lg p-2 ml-auto border border-gray-100 shadow-md">
|
|
||||||
<font className="text-gray-200">{i}</font>
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<div className='flex flex-row items-baseline space-x-5'>
|
||||||
|
{/* personal line */}
|
||||||
|
<section className='flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
|
||||||
|
<span className='p-5 flex flex-col'>
|
||||||
|
<span className="text-gray-300">PERSONAL LINE</span>
|
||||||
|
<font className="font-sans text-sm text-gray-400 pt-2">
|
||||||
|
<font className="rounded-full p-1 bg-opacity-30 bg-teal-700 text-teal-700 font-bold">3</font> teammates open for collab</font>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* list of team members */}
|
||||||
|
{
|
||||||
|
testFriends.map((friend, i) => {
|
||||||
|
return (
|
||||||
|
<span key={i} className={"flex flex-row items-center border-t-2 py-2 px-2 justify-items-start w-60 ease-in-out duration-300 " + (this.state.selectedChannel == i ? "bg-gray-300 scale-105 shadow-2xl" : " ")}>
|
||||||
|
<span className='relative flex mr-2'>
|
||||||
|
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||||
|
|
||||||
|
{this.statusBubble(friend.status)}
|
||||||
|
|
||||||
|
<Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span className='flex flex-col'>
|
||||||
|
<font className="text-sm text-black font-bold">{friend.name} </font>
|
||||||
|
|
||||||
|
<font className={"text-xs font-sans text-gray-300" + (this.state.selectedChannel == i ? "text-black" : " ")}>{friend.role}</font>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{
|
||||||
|
this.state.selectedChannel == i ?
|
||||||
|
<>
|
||||||
|
<span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-10 h-10 text-center">
|
||||||
|
<font className="text-white text-sm">{i}</font>
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
|
||||||
|
:
|
||||||
|
<span className="rounded-lg p-2 ml-auto border border-gray-100 shadow-md w-10 h-10 text-center">
|
||||||
|
<font className="text-gray-200 text-sm">{i}</font>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* live conversations */}
|
||||||
|
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
|
||||||
|
<span className="text-gray-300">LIVE CONVERSATIONS</span>
|
||||||
|
|
||||||
|
<span>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{/* */}
|
||||||
|
<section className=''>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='fixed bottom-10 w-full'>
|
||||||
|
{/* 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'>
|
||||||
|
<span className='flex flex-row'>
|
||||||
|
<span className='relative flex mr-2'>
|
||||||
|
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||||
|
|
||||||
|
{this.statusBubble(UserStatus.online)}
|
||||||
|
|
||||||
|
<Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
|
||||||
|
</span>
|
||||||
|
|
||||||
{/* live conversations */}
|
<span className='flex flex-col'>
|
||||||
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
|
<font className="text-sm text-black font-bold">{testFriends[this.state.selectedChannel].name} </font>
|
||||||
<span className="text-gray-300">LIVE CONVERSATIONS</span>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
|
|
||||||
|
<font className={"text-xs font-sans text-gray-300 text-black"}>{testFriends[this.state.selectedChannel].role}</font>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* shortcuts */}
|
||||||
|
<span className='flex flex-row space-x-3'>
|
||||||
|
<span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-10 h-10 text-center">
|
||||||
|
<font className="text-white text-sm font-bold">R</font>
|
||||||
|
</span>
|
||||||
|
<span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-20 h-10 text-center">
|
||||||
|
<font className="text-white text-sm font-bold">SPACE</font>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</>
|
||||||
{/* */}
|
|
||||||
<section className=''>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user