From 6c1dea86a23397a5f939118605d52530629e6394 Mon Sep 17 00:00:00 2001 From: Timur Ercan Date: Thu, 12 Jan 2023 13:57:26 +0100 Subject: [PATCH] initals avatar basics --- apps/web/components/navigation.tsx | 9 ++- apps/web/package.json | 1 + package-lock.json | 125 +++++++++++++++++++++++++++++ 3 files changed, 131 insertions(+), 4 deletions(-) diff --git a/apps/web/components/navigation.tsx b/apps/web/components/navigation.tsx index 276555ace..7224b63c1 100644 --- a/apps/web/components/navigation.tsx +++ b/apps/web/components/navigation.tsx @@ -3,6 +3,7 @@ import { Disclosure, Menu, Transition } from "@headlessui/react"; import Link from "next/link"; import { useRouter } from "next/router"; import { signOut, useSession } from "next-auth/react"; +import avatarFromInitials from "avatar-from-initials"; import { Bars3Icon, @@ -109,10 +110,10 @@ export default function TopNavigation() {
Open user menu -
diff --git a/apps/web/package.json b/apps/web/package.json index a8f88a1df..91bf26b37 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -18,6 +18,7 @@ "@types/node": "18.11.9", "@types/react": "18.0.25", "@types/react-dom": "18.0.9", + "avatar-from-initials": "^1.0.3", "bcryptjs": "^2.4.3", "dotenv": "^16.0.3", "eslint": "8.27.0", diff --git a/package-lock.json b/package-lock.json index 43b6bdff5..11d201fd5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "@types/node": "18.11.9", "@types/react": "18.0.25", "@types/react-dom": "18.0.9", + "avatar-from-initials": "^1.0.3", "bcryptjs": "^2.4.3", "dotenv": "^16.0.3", "eslint": "8.27.0", @@ -885,6 +886,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/avatar-from-initials": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/avatar-from-initials/-/avatar-from-initials-1.0.3.tgz", + "integrity": "sha512-8gCqhVreUHUyXL78c0bDZB/lBEzEta9K2FUw4RvV37rzPXuCXZsPJDfka0NC+JMUC3ATGNDA5qOjobBhXYjJew==", + "dependencies": { + "string-to-color": "^2.2.2", + "ui-avatar-svg": "^1.0.0" + } + }, "node_modules/axe-core": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.2.tgz", @@ -1083,6 +1093,11 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "node_modules/colornames": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/colornames/-/colornames-1.1.1.tgz", + "integrity": "sha512-/pyV40IrsdulWv+wFPmERh9k/mjsPZ64yUMDmWrtj/k1nmgrzzIENWKdaVKyBbvFdQWqkcaRxr+polCo3VMe7A==" + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -2207,6 +2222,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/hex-rgb": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz", + "integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==", + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -2681,6 +2707,21 @@ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" }, + "node_modules/lodash.padend": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/lodash.padend/-/lodash.padend-4.6.1.tgz", + "integrity": "sha512-sOQs2aqGpbl27tmCS1QNZA09Uqp01ZzWfDUoD+xzTii0E7dSQfRKcRetFwa+uXaxaqL+TKm7CgD2JdKP7aZBSw==" + }, + "node_modules/lodash.trimstart": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/lodash.trimstart/-/lodash.trimstart-4.5.1.tgz", + "integrity": "sha512-b/+D6La8tU76L/61/aN0jULWHkT0EeJCmVstPBn/K9MtD2qBW83AsBNrr63dKuWYwVMO7ucv13QNO/Ek/2RKaQ==" + }, + "node_modules/lodash.words": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.words/-/lodash.words-4.2.0.tgz", + "integrity": "sha512-mXxqd8Yx9BGPij3lZKFSdOsjOTbL4krbCCp9slEozaN4EMppA2dFmK/f8HeohodprY6W0vOdiQ5WFgPaTI75xQ==" + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -6179,6 +6220,14 @@ "node": ">=0.10.0" } }, + "node_modules/rgb-hex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-3.0.0.tgz", + "integrity": "sha512-8h7ZcwxCBDKvchSWbWngJuSCqJGQ6nDuLLg+QcRyQDbX9jMWt+PpPeXAhSla0GOooEomk3lCprUpGkMdsLjKyg==", + "engines": { + "node": ">=8" + } + }, "node_modules/rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -6298,6 +6347,19 @@ "node": ">=0.10.0" } }, + "node_modules/string-to-color": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/string-to-color/-/string-to-color-2.2.2.tgz", + "integrity": "sha512-XeA2goP7PNsSlz8RRn6KhYswnMf5Tl+38ajfy8n4oZJyMGC4qqKgHNHsZ/3qwvr42NRIjf9eSr721SyetDeMkA==", + "dependencies": { + "colornames": "^1.1.1", + "hex-rgb": "^4.1.0", + "lodash.padend": "^4.6.1", + "lodash.trimstart": "^4.5.1", + "lodash.words": "^4.2.0", + "rgb-hex": "^3.0.0" + } + }, "node_modules/string.prototype.matchall": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz", @@ -6628,6 +6690,11 @@ "node": ">=4.2.0" } }, + "node_modules/ui-avatar-svg": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/ui-avatar-svg/-/ui-avatar-svg-1.0.0.tgz", + "integrity": "sha512-cNVWCu20do0jNT+OqSb0UWHPrRYE91VtyNVhd5EPb2Xp5A9o6d9tETGZs7JWAlgbJMuiQZkr+8HWxbc41vkEqA==" + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -6908,6 +6975,7 @@ "@types/react": "18.0.25", "@types/react-dom": "18.0.9", "autoprefixer": "^10.4.13", + "avatar-from-initials": "^1.0.3", "bcryptjs": "^2.4.3", "dotenv": "^16.0.3", "eslint": "8.27.0", @@ -7429,6 +7497,15 @@ "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==" }, + "avatar-from-initials": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/avatar-from-initials/-/avatar-from-initials-1.0.3.tgz", + "integrity": "sha512-8gCqhVreUHUyXL78c0bDZB/lBEzEta9K2FUw4RvV37rzPXuCXZsPJDfka0NC+JMUC3ATGNDA5qOjobBhXYjJew==", + "requires": { + "string-to-color": "^2.2.2", + "ui-avatar-svg": "^1.0.0" + } + }, "axe-core": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.2.tgz", @@ -7562,6 +7639,11 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "colornames": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/colornames/-/colornames-1.1.1.tgz", + "integrity": "sha512-/pyV40IrsdulWv+wFPmERh9k/mjsPZ64yUMDmWrtj/k1nmgrzzIENWKdaVKyBbvFdQWqkcaRxr+polCo3VMe7A==" + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -8393,6 +8475,11 @@ "has-symbols": "^1.0.2" } }, + "hex-rgb": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz", + "integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==" + }, "ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -8719,6 +8806,21 @@ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" }, + "lodash.padend": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/lodash.padend/-/lodash.padend-4.6.1.tgz", + "integrity": "sha512-sOQs2aqGpbl27tmCS1QNZA09Uqp01ZzWfDUoD+xzTii0E7dSQfRKcRetFwa+uXaxaqL+TKm7CgD2JdKP7aZBSw==" + }, + "lodash.trimstart": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/lodash.trimstart/-/lodash.trimstart-4.5.1.tgz", + "integrity": "sha512-b/+D6La8tU76L/61/aN0jULWHkT0EeJCmVstPBn/K9MtD2qBW83AsBNrr63dKuWYwVMO7ucv13QNO/Ek/2RKaQ==" + }, + "lodash.words": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.words/-/lodash.words-4.2.0.tgz", + "integrity": "sha512-mXxqd8Yx9BGPij3lZKFSdOsjOTbL4krbCCp9slEozaN4EMppA2dFmK/f8HeohodprY6W0vOdiQ5WFgPaTI75xQ==" + }, "loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -11000,6 +11102,11 @@ "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==" }, + "rgb-hex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-3.0.0.tgz", + "integrity": "sha512-8h7ZcwxCBDKvchSWbWngJuSCqJGQ6nDuLLg+QcRyQDbX9jMWt+PpPeXAhSla0GOooEomk3lCprUpGkMdsLjKyg==" + }, "rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -11075,6 +11182,19 @@ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" }, + "string-to-color": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/string-to-color/-/string-to-color-2.2.2.tgz", + "integrity": "sha512-XeA2goP7PNsSlz8RRn6KhYswnMf5Tl+38ajfy8n4oZJyMGC4qqKgHNHsZ/3qwvr42NRIjf9eSr721SyetDeMkA==", + "requires": { + "colornames": "^1.1.1", + "hex-rgb": "^4.1.0", + "lodash.padend": "^4.6.1", + "lodash.trimstart": "^4.5.1", + "lodash.words": "^4.2.0", + "rgb-hex": "^3.0.0" + } + }, "string.prototype.matchall": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz", @@ -11298,6 +11418,11 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz", "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==" }, + "ui-avatar-svg": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/ui-avatar-svg/-/ui-avatar-svg-1.0.0.tgz", + "integrity": "sha512-cNVWCu20do0jNT+OqSb0UWHPrRYE91VtyNVhd5EPb2Xp5A9o6d9tETGZs7JWAlgbJMuiQZkr+8HWxbc41vkEqA==" + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",