diff --git a/web/modals/user-profile/user-profile.css b/web/modals/user-profile/user-profile.css new file mode 100644 --- /dev/null +++ b/web/modals/user-profile/user-profile.css @@ -0,0 +1,33 @@ +.container { + display: flex; + align-items: center; + padding: 0 32px 32px; + width: 552px; + max-width: 80vw; +} + +.usernameContainer { + padding-left: 16px; +} + +.usernameText { + font-size: var(--xxl-font-24); + color: var(--fg); + font-weight: 500; +} + +.copyUsernameContainer { + display: flex; + align-items: center; + color: var(--purple-link); + margin-top: 8px; +} + +.copyUsernameContainer:hover { + cursor: pointer; +} + +.copyUsernameText { + font-size: var(--xs-font-12); + margin-left: 4px; +} diff --git a/web/modals/user-profile/user-profile.react.js b/web/modals/user-profile/user-profile.react.js new file mode 100644 --- /dev/null +++ b/web/modals/user-profile/user-profile.react.js @@ -0,0 +1,40 @@ +// @flow + +import * as React from 'react'; + +import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; +import { stringForUserExplicit } from 'lib/shared/user-utils.js'; +import type { UserInfo } from 'lib/types/user-types'; + +import css from './user-profile.css'; +import UserAvatar from '../../avatars/user-avatar.react.js'; + +type Props = { + +userInfo: ?UserInfo, +}; + +function UserProfile(props: Props): React.Node { + const { userInfo } = props; + + const usernameText = stringForUserExplicit(userInfo); + + const userProfile = React.useMemo( + () => ( +
+ +
+
{usernameText}
+
+ +

Copy username

+
+
+
+ ), + [userInfo?.id, usernameText], + ); + + return userProfile; +} + +export default UserProfile;