mirror of
https://github.com/coder/coder.git
synced 2026-06-02 20:48:20 +00:00
Presley Pizzo
22f820c69b
* Install and configure XState * userXService - typegen not working yet * Lint, fix error transitions * Lint * Change initial state to handle loss of state * Fix gitignore * Fix types by hook or by crook * Use xservice in all pages * Glue/visual component separation * Fix dependency merge * Lint * Remove UserContext * Remove inspector * Add typegen command to site/out * Fix index page redirects * DRY up nav and redirects * Moves based on merge * Moving Page helpers into Page dir * Move xservice into src, update script * Move and storybook navbarview * Update docs * Install MSW * Reorganization, with apologies * Missed spots * Add mock handlers * Configure jest for msw * Fix typos * Shift unit test to NavbarView * Fix test types * Rename NavbarView test * Attempt at test, wip * Fix config * Be logged out, only warn * Conditionally show text to help test * Use a Context for MSW's sake * mocks -> test_helpers * Enable dev tools * Format * Fix import * Fixes * Lint * run typegen postinstall Co-authored-by: Bryan Phelps <bryan@coder.com>
59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
import { makeStyles } from "@material-ui/core/styles"
|
|
import Typography from "@material-ui/core/Typography"
|
|
import React from "react"
|
|
import { UserResponse } from "../../api/types"
|
|
|
|
import { UserAvatar } from "./UserAvatar"
|
|
|
|
interface UserProfileCardProps {
|
|
user: UserResponse
|
|
}
|
|
|
|
export const UserProfileCard: React.FC<UserProfileCardProps> = ({ user }) => {
|
|
const styles = useStyles()
|
|
|
|
return (
|
|
<div className={styles.root}>
|
|
<div className={styles.avatarContainer}>
|
|
<UserAvatar className={styles.avatar} user={user} />
|
|
</div>
|
|
<Typography className={styles.userName}>{user.username}</Typography>
|
|
<Typography className={styles.userEmail}>{user.email}</Typography>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
paddingTop: theme.spacing(3),
|
|
textAlign: "center",
|
|
},
|
|
avatarContainer: {
|
|
width: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
avatar: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: "50%",
|
|
marginBottom: theme.spacing(1),
|
|
transition: `transform .2s`,
|
|
|
|
"&:hover": {
|
|
transform: `scale(1.1)`,
|
|
},
|
|
},
|
|
userName: {
|
|
fontSize: 16,
|
|
marginBottom: theme.spacing(0.5),
|
|
},
|
|
userEmail: {
|
|
fontSize: 14,
|
|
letterSpacing: 0.2,
|
|
color: theme.palette.text.secondary,
|
|
marginBottom: theme.spacing(1.5),
|
|
},
|
|
}))
|