From 7788160267d75c9aff16915aac792de8f90416e6 Mon Sep 17 00:00:00 2001 From: Paul Pan Date: Thu, 22 Feb 2024 18:51:40 +0800 Subject: [PATCH] fix: implement header --- package.json | 2 + pnpm-lock.yaml | 352 ++++++++++++++++++++++++++++++++++++-- src/components/Header.tsx | 95 +++++++--- src/pages/Root.tsx | 2 +- 4 files changed, 409 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index f0b2865..c01d4a4 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,8 @@ "dependencies": { "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.2", + "@dicebear/collection": "^7.0.4", + "@dicebear/core": "^7.0.4", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@reduxjs/toolkit": "^2.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 63109e5..0f8cf8b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,12 @@ dependencies: '@chakra-ui/react': specifier: ^2.8.2 version: 2.8.2(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.57)(framer-motion@11.0.5)(react-dom@18.2.0)(react@18.2.0) + '@dicebear/collection': + specifier: ^7.0.4 + version: 7.0.4(@dicebear/core@7.0.4) + '@dicebear/core': + specifier: ^7.0.4 + version: 7.0.4 '@emotion/react': specifier: ^11.11.3 version: 11.11.3(@types/react@18.2.57)(react@18.2.0) @@ -1435,6 +1441,326 @@ packages: react: 18.2.0 dev: false + /@dicebear/adventurer-neutral@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-meAMZFLzvqf58p8Qno4vKRmwss2XdKn5osG5/xPkiXVUVhtNEtVoKSIG0KK9ukjC18UOHo6mjZab7xUclz6o4Q==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/adventurer@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-1ya9lD0S8YHaW+1+bky9HCnLWve/gjiFtZ1wjEM26nBxrFBCmvgiqPn/+L/Uf0ercHIyXMRElHylWmLxtWztfQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/avataaars-neutral@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-EpbeiY23G4fuL2DnZ7fjnSn8WZvdALgg/N3pQpn8yPDdulgaV4vRDOit94pvp/DjW0Zz7mPPkSEN//0zijcXvA==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/avataaars@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-mkQDtGYfj4rVguuPednpKj2RQWyV1pew3GqcKfjz77HBfhHeXDDwlMqWPQkaKyYkI0V9q3LtApGECyxYiisDvA==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/big-ears-neutral@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-kxydevCihleTG5TnIh604i/zi+1MMvPuFuecattcUoa3NIPx4zi08j2zb7gwTUX54l49ENG1ZSO058S9c03yrA==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/big-ears@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-yOvIVFOB8Wv9ulSp6vIyEHiIHkishnLEuKIPAcgGScxjlbtcAo9OmeUsgSmM03wYsV62jInaiA4hAHRPfLYzfQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/big-smile@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-vHuedMXdK5RGhXDSCY+U9vDyfby20m3eteYSgEwLKmi3ZJBLXw2xAuAb8cGMPmK7zsyj4eH50r93hKcaTaOTag==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/bottts-neutral@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-C9McuZSdrMypTAOSsNJMgsbb2wylHbrvkPyksyouSgeIRrr3vdJFAsa+N1UfApNj4YdsznmoBIMl2XAGktTBAg==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/bottts@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-Nni2Y5rL6+CJ8/Cij1lCvV/YhI+i3cy//nWQQGqmGTqlCGZdOziDGCWuf7Ufmv8081sbKWj++QOP+ueAX8E7ZA==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/collection@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-5jXmitM/DGwmorp9hGh5coEhrMLsygEYNJiOf6eH0loVeXjI0/X3TEmQabtXzwp/nVhBGYyvuBmPIg50fnUhxQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/adventurer': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/adventurer-neutral': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/avataaars': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/avataaars-neutral': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/big-ears': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/big-ears-neutral': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/big-smile': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/bottts': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/bottts-neutral': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/core': 7.0.4 + '@dicebear/croodles': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/croodles-neutral': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/fun-emoji': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/icons': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/identicon': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/initials': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/lorelei': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/lorelei-neutral': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/micah': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/miniavs': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/notionists': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/notionists-neutral': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/open-peeps': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/personas': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/pixel-art': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/pixel-art-neutral': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/rings': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/shapes': 7.0.4(@dicebear/core@7.0.4) + '@dicebear/thumbs': 7.0.4(@dicebear/core@7.0.4) + dev: false + + /@dicebear/converter@7.0.4: + resolution: {integrity: sha512-oiA2Oc5izWf6ipPtHYCi2c9W565VzyryObtSL6xB36V9MHRD8wvH5mYr9AvbViDGEOOeNE3EtIELQIMdNtB7Rg==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@resvg/resvg-js': ^2.4.1 + exiftool-vendored: ^23.0.0 + sharp: ^0.32.6 + peerDependenciesMeta: + '@resvg/resvg-js': + optional: true + exiftool-vendored: + optional: true + sharp: + optional: true + dependencies: + '@types/json-schema': 7.0.15 + tmp-promise: 3.0.3 + dev: false + + /@dicebear/core@7.0.4: + resolution: {integrity: sha512-Xi8Au8K4pWj61jKMKqlhqmg83DvMAG6PfDuDbp7F75ZNvrGGh0BkJt9keSHe4WpHs+BbXDXSMOivSS10QB20fA==} + engines: {node: '>=16.0.0'} + dependencies: + '@dicebear/converter': 7.0.4 + '@types/json-schema': 7.0.15 + transitivePeerDependencies: + - '@resvg/resvg-js' + - exiftool-vendored + - sharp + dev: false + + /@dicebear/croodles-neutral@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-b7v1WPEDKWzJAcCMo8OQMMgRTI0c2Ae3dCLBbFXtkhJ6oqzuFUbWwcrUWsp0segBXlPAM3lZrH1gy1GJBHrSuQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/croodles@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-PMe7W2IE8R9yqEXuccfEaTF0D+1VXrCXnShw52D5C23qPDTxL1XxZKXcOoeXYi5o1jeIVagZjHiX8XaQK18ftQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/fun-emoji@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-rlaID1EQW8pj/TmM805+dA6XVLge2hkiVaQkoM+4Df/RGj/GPbDeBgu8dRKLwORPNY5ug3zfFgERStZcSyYmqQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/icons@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-wkWjjkDD43lmYKgCBDdUc54y6llCsCOSPND2RnKi6noOGpThsN6aTE6nN2Hwf0ORxWPEzBFRmgoat+frWd9a4A==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/identicon@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-Q68lP7dqqt0fMx9SONPJSi94aieNveTyrCgv/kuU3F9upeQyesmdAeQ+e2QOojOOMrEuM+ujFuPInvwwkaZF7w==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/initials@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-cNkuG/3cPbF4UScmLk+2nYF2LaB9N1k3Pw1gmd3PST+oUsdlkNIM6e4Wym/0fgDLGPWyxbiGsbhe371ACWJVNQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/lorelei-neutral@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-QtyKGJhExocZse662b1W5LGh0ykFh4AFf827f5FkXiOGmAgghsm1m/0bFuF9giwqFJ7W3eZu5oTSn97+s3z17A==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/lorelei@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-pFDNHns7lke3M+TGPHFizjsjBMM/70okdH4Y+WKg9WHe+Y0dV54OgXf9/I6A10ipdVTCtM4i2xfNkSW+QP/spQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/micah@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-c6U9iqsEsuPqHxiZuM5O7xqJIv98rIMergdi6O8jlINXacNLzF9DUHLAkxMiFeiqDDqQ34wUQq+M6qt9xBq0eQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/miniavs@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-p1sWveGT3gvtnwplhDakB6wEu5jT/EHbRzsTMOT3Lz9nqkF08sJCe7KCRsji1EVGyX4nOjA+dQcHK9yUAdqQAg==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/notionists-neutral@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-tk06h7uj1IR42g/RhhLVv1rbxy+rNROhXSto5ADX0/Ovk+HaR8yQGQyO3Tt/rXpGuf5+5JK0sVAiRgGaMFSxig==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/notionists@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-twmpHy2S6FkTiPzNd0wXuWhBv0XgkCPIuzJiUeyTadVEjlijOvPeAr9kuGuhDMO7MTHnuQoFRw1sctQmj+xbXA==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/open-peeps@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-c4oMnOvzLiMXoj+oBKILzF0DRWRd3I/ykBC7zhr3904R/dp6PXQnMDiMFIjCYeifCl8W30ggTzvNEX7nwbxJaQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/personas@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-gbWqNakXeWSKjW4s4zw4dSmuHOGF9+tgwzjwilrQvZMODOESYUCKPql/3KFJLVG9Rr00BH83QGZEn6vYiBLbVg==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/pixel-art-neutral@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-4hzHw7I4f4bj4C7L2xQ28oA7XS1uonwGE7jTCqjRzg3YkzjTthxf7kEE/WWiP0Lk1onPhSdB8kqDejPGvNUXLQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/pixel-art@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-H0OZ7JyLyiBYOa9NJI6yr1x/XjXl4P17U8lvRuQhCYHntdgDvuIwv1/kulq4vLBGRK1afXBTm/NPWi0Optyg/Q==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/rings@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-LJzSWronkeWefFLwaOWg3tr0jSOuW2hien4Uv+nG2alYSkJ6hGH4zLtGo/SRQdNWQg4j/6838fWJDdoryWQM2w==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/shapes@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-C1OhdAGwCmEK9JDjK9wERBxaZIOp2x4yWVsra/VCfba+fJSKmmorhbYIw33vE5ZV3/PseztnDB3sWOMMl/jCdw==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + + /@dicebear/thumbs@7.0.4(@dicebear/core@7.0.4): + resolution: {integrity: sha512-mAOWbaNtWKLIHGtTZxHVei1UFWz/l0h4aP8h97UE71av2QTM7CEw2RpF8Q19MxxoDlHi+oZ7Jvjblzi5k96LtA==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@dicebear/core': ^7.0.0 + dependencies: + '@dicebear/core': 7.0.4 + dev: false + /@emotion/babel-plugin@11.11.0: resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==} dependencies: @@ -2057,7 +2383,6 @@ packages: /@types/json-schema@7.0.15: resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} - dev: true /@types/json5@0.0.29: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} @@ -2487,7 +2812,6 @@ packages: /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} - dev: true /bidi-js@1.0.3: resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==} @@ -2500,7 +2824,6 @@ packages: dependencies: balanced-match: 1.0.2 concat-map: 0.0.1 - dev: true /brace-expansion@2.0.1: resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==} @@ -2626,7 +2949,6 @@ packages: /concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} - dev: true /convert-source-map@1.9.0: resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==} @@ -3384,7 +3706,6 @@ packages: /fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} - dev: true /fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} @@ -3480,7 +3801,6 @@ packages: minimatch: 3.1.2 once: 1.4.0 path-is-absolute: 1.0.1 - dev: true /globals@11.12.0: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} @@ -3650,11 +3970,9 @@ packages: dependencies: once: 1.4.0 wrappy: 1.0.2 - dev: true /inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} - dev: true /internal-slot@1.0.7: resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==} @@ -4115,7 +4433,6 @@ packages: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} dependencies: brace-expansion: 1.1.11 - dev: true /minimatch@9.0.3: resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==} @@ -4228,7 +4545,6 @@ packages: resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} dependencies: wrappy: 1.0.2 - dev: true /onetime@5.1.2: resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==} @@ -4300,7 +4616,6 @@ packages: /path-is-absolute@1.0.1: resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} engines: {node: '>=0.10.0'} - dev: true /path-key@3.1.1: resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} @@ -4650,7 +4965,6 @@ packages: hasBin: true dependencies: glob: 7.2.3 - dev: true /rollup@4.12.0: resolution: {integrity: sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==} @@ -4946,6 +5260,19 @@ packages: resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==} dev: false + /tmp-promise@3.0.3: + resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==} + dependencies: + tmp: 0.2.1 + dev: false + + /tmp@0.2.1: + resolution: {integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==} + engines: {node: '>=8.17.0'} + dependencies: + rimraf: 3.0.2 + dev: false + /to-fast-properties@2.0.0: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} @@ -5306,7 +5633,6 @@ packages: /wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} - dev: true /ws@8.16.0: resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 496f56d..1bd6d59 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -16,43 +16,82 @@ import { useColorModeValue, } from "@chakra-ui/react"; import { Link as ReactRouterLink } from "react-router-dom"; -import { MoonIcon, SunIcon } from "@chakra-ui/icons"; -export const Header = () => { +import { MoonIcon, SunIcon } from "@chakra-ui/icons"; +import { createAvatar } from "@dicebear/core"; +import { shapes } from "@dicebear/collection"; + +import { useProfileQuery } from "../app/services/user"; + +export default function Header() { const { colorMode, toggleColorMode } = useColorMode(); + const { data: profile } = useProfileQuery(0); + + const avatar = createAvatar(shapes, { seed: profile?.body.email || "default" }); + const avatarSvg = avatar.toDataUriSync(); + const username = profile?.body.nick_name || "Guest"; + + const userMenu = ( + <> + + Profile + + + Logout + + + ); + + const guestMenu = ( + <> + + Login + + + ); + + const menu = ( + + + + + +
+ +
+
+ {username} +
+ + {profile ? userMenu : guestMenu} + + + ); + + const switchTheme = ; + + const logo = ( + + + + Woo Online Judge + + + + ); + return ( - - - - Woo Online Judge - - - + {logo} - - - - - - - -
- -
-
-

Username

-
- - Account Settings - Logout - - + + {switchTheme} + {menu} ); -}; +} diff --git a/src/pages/Root.tsx b/src/pages/Root.tsx index 2baf537..3663fd5 100644 --- a/src/pages/Root.tsx +++ b/src/pages/Root.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Box, Container, Flex, SkeletonCircle, SkeletonText } from "@chakra-ui/react"; import { Outlet } from "react-router-dom"; +import Header from "../components/Header"; import Footer from "../components/Footer"; -import { Header } from "../components/Header"; const SkeletonPage = () => (