diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/GithubAvatar/GithubAvatar.tsx | 35 | ||||
| -rw-r--r-- | src/components/SolutionCard/SolutionCard.tsx | 9 | ||||
| -rw-r--r-- | src/pages/Contribute/Contribute.tsx | 40 |
3 files changed, 53 insertions, 31 deletions
diff --git a/src/components/GithubAvatar/GithubAvatar.tsx b/src/components/GithubAvatar/GithubAvatar.tsx new file mode 100644 index 0000000..6aab28e --- /dev/null +++ b/src/components/GithubAvatar/GithubAvatar.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import { + Avatar, + Link, +} from '@material-ui/core'; + +interface PropTypes { + username: string; +} + +const GithubAvatar: React.FC<PropTypes> = ({ username }) => { + if (username === 'anonymous') return <Avatar/>; + + const githubUrl = `https://github.com/${username}`; + const avatarUrl = githubUrl + '.png'; + const usernameTokens = username.split(/[ ,.\-_#@;]/g); + const altText = ( + (usernameTokens.length > 1)? + (usernameTokens[0][0] + usernameTokens[1][0]) + : + usernameTokens[0][0] + ).toUpperCase() + + return ( + <Link href={githubUrl}> + <Avatar> + <img src={avatarUrl} alt={altText} /> + </Avatar> + </Link> + ) +}; + +export default GithubAvatar; + diff --git a/src/components/SolutionCard/SolutionCard.tsx b/src/components/SolutionCard/SolutionCard.tsx index 5adbff9..7ec8888 100644 --- a/src/components/SolutionCard/SolutionCard.tsx +++ b/src/components/SolutionCard/SolutionCard.tsx @@ -6,7 +6,6 @@ import { CardHeader, CardContent, IconButton, - Avatar, Grid, Menu, MenuItem, @@ -18,6 +17,7 @@ import TimerIcon from '@material-ui/icons/Timer'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import DeleteIcon from '@material-ui/icons/Delete'; +import GithubAvatar from '../GithubAvatar/GithubAvatar'; import { del } from '../../requests'; @@ -77,12 +77,7 @@ const SolutionCard: React.FC<PropTypes> = ({ data, removeThisCard }) => { return ( <Card className={classes.root}> <CardHeader - avatar={ - author === 'anonymous'? - (<Avatar/>) - : - (<Avatar>{author[0].toUpperCase()}</Avatar>) - } + avatar={<GithubAvatar username={author} />} title={author} subheader={date.toLocaleString('default', DATE_FORMAT)} action={ diff --git a/src/pages/Contribute/Contribute.tsx b/src/pages/Contribute/Contribute.tsx index 4c37fb9..77228a1 100644 --- a/src/pages/Contribute/Contribute.tsx +++ b/src/pages/Contribute/Contribute.tsx @@ -6,7 +6,6 @@ import { List, ListItem, Link, - Avatar, Divider, makeStyles, } from '@material-ui/core'; @@ -16,6 +15,7 @@ import BugReportIcon from '@material-ui/icons/BugReport'; import NewReleasesIcon from '@material-ui/icons/NewReleases'; import { Window, ContentSection } from 'react-benzin'; +import GithubAvatar from '../../components/GithubAvatar/GithubAvatar'; import developers from '../../developers.json'; @@ -111,31 +111,23 @@ const Contribute: React.FC = () => { <ContentSection sectionName="Developers"> <List> { - developers.map(developer => { - const githubUrl = `https://github.com/${developer.username}`; - - return ( - <div key={developer.username}> - <ListItem> - <Link href={githubUrl}> - <Avatar alt={developer.username} src={`${githubUrl}.png`} /> - </Link> - <div> - <Link href={githubUrl}> - {developer.username} - </Link> - <Typography component="div" color="textSecondary"> - {developer.role} - </Typography> - </div> - </ListItem> - <Divider variant="middle" /> - </div> - ) - }) + developers.map(developer => ( + <div key={developer.username}> + <ListItem> + <GithubAvatar username={developer.username} /> + <div> + <Link href="#">{developer.username}</Link> + <Typography component="div" color="textSecondary"> + {developer.role} + </Typography> + </div> + </ListItem> + <Divider variant="middle" /> + </div> + )) } <ListItem> - <Avatar /> + <GithubAvatar username="anonymous" /> You can be here! </ListItem> </List> |