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

nice integration of typescript

Browse Source
This commit is contained in:
Arjun Patel
2022-01-09 22:51:20 -08:00
parent 1e013e71e9
commit 40d5e71833
6 changed files with 131 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
models/user.ts
+12
View File
@@ -0,0 +1,12 @@
export class User {
id: string;
nickname: string;
}
export enum UserStatus {
online = "online",
offline = "offline",
inCall = "in call",
busy = "busy"
}
next-env.d.ts
Vendored
+5
View File
@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
package-lock.json
Generated
+59
View File
@@ -12,6 +12,7 @@
"react-icons": "^4.3.1"
},
"devDependencies": {
"@types/react": "^17.0.38",
"autoprefixer": "^10.4.2",
"eslint": "8.4.0",
"eslint-config-next": "12.0.7",
@@ -1190,6 +1191,29 @@
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
"dev": true
},
"node_modules/@types/prop-types": {
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
"dev": true
},
"node_modules/@types/react": {
"version": "17.0.38",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
"integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
"dev": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
},
"node_modules/@typescript-eslint/parser": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.5.0.tgz",
@@ -2133,6 +2157,12 @@
}
}
},
"node_modules/csstype": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
"dev": true
},
"node_modules/damerau-levenshtein": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
@@ -6830,6 +6860,29 @@
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
"dev": true
},
"@types/prop-types": {
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
"dev": true
},
"@types/react": {
"version": "17.0.38",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
"integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
"dev": true,
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
},
"@typescript-eslint/parser": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.5.0.tgz",
@@ -7540,6 +7593,12 @@
"cssnano-preset-simple": "^3.0.0"
}
},
"csstype": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
"dev": true
},
"damerau-levenshtein": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
package.json
+1
View File
@@ -14,6 +14,7 @@
"react-icons": "^4.3.1"
},
"devDependencies": {
"@types/react": "^17.0.38",
"autoprefixer": "^10.4.2",
"eslint": "8.4.0",
"eslint-config-next": "12.0.7",
pages/teams/demo.js → pages/teams/demo.tsx
+24 -14
View File
@@ -2,43 +2,44 @@ 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 = [
let testFriends = [
{
name: "Liam",
role: "engineer",
systemAvatar: "1",
status: "online"
status: UserStatus.online
},
{
name: "Emily",
role: "engineer",
systemAvatar: "2",
status: "online"
status: UserStatus.online
},
{
name: "Paul",
role: "architect",
systemAvatar: "3",
status: "online"
status: UserStatus.online
},
{
name: "Mark",
role: "engineer",
systemAvatar: "4",
status: "busy"
status: UserStatus.busy
},
{
name: "Adriana",
role: "design",
systemAvatar: "5",
status: "busy"
status: UserStatus.busy
},
{
name: "Josh",
role: "design",
systemAvatar: "6",
status: "offline"
status: UserStatus.offline
}
]
@@ -50,8 +51,19 @@ export default class Demo extends React.Component {
}
}
statusBubble(status) {
statusBubble(status: UserStatus) {
console.log(status)
switch(status) {
case UserStatus.online:
return <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
case UserStatus.busy:
return <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
case UserStatus.offline:
return <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
default:
return <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
}
}
render() {
@@ -102,12 +114,13 @@ export default class Demo extends React.Component {
{/* list of team members */}
{
testFriends.map((friend, i) => {
console.log(friend)
return (
<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" : " "}`}>
<span className='relative flex mr-2'>
<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>
@@ -115,17 +128,14 @@ export default class Demo extends React.Component {
<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>
</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>
tsconfig.json
+30
View File
@@ -0,0 +1,30 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}