Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | 61x 61x 70x 61x 70x 392x 61x 70x 70x 70x 70x | import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Chip from '@material-ui/core/Chip';
import Grid from '@material-ui/core/Grid';
import FiberManualRecordRoundedIcon from '@material-ui/icons/FiberManualRecordRounded';
import githubColorDictionary from './data/gh-colors.json';
import Avatar from '@material-ui/core/Avatar';
import { makeStyles } from '@material-ui/styles';
const useStyles = makeStyles((theme) => ({
select : {
[theme.breakpoints.down('xs')]: {
width: '55vw',
},
},
chipStyle : {
backgroundColor: '#F1F1F1',
paddingLeft: '2px',
},
issueStyles : {
fontSize: '13px',
fontStyle: 'normal',
fontWeight: '400',
}
}));
const renderLanguageChip = (language,classes) => {
return <Chip size='small' className={classes.chipStyle} label={language} icon={<FiberManualRecordRoundedIcon style={{ color: githubColorDictionary[language] }} />} />;
};
const renderTopicTags = (topics,classes) => {
return topics.map((i) => {
return <Chip key={i} size='small' className={classes.chipStyle} label={i} />;
});
};
const renderAffiliationsTopicsTags = (topics,classes) => {
Iif (topics === null){
return '';
}
return topics.map((i) => {
return <Chip key={i} size='small' avatar={<Avatar alt="Natacha" src="/images/github-topic-tag-logo.png" />} className={classes.chipStyle} label={i} />;
});
};
/**
*
* @param {*} props
*/
export default function ProjectCard(props) {
const classes = useStyles();
return (
<Card data-cy='project-card' variant='outlined'>
<CardContent>
<Grid container>
<Grid item container xs={12} >
{/* Project Title, Watch and Star buttons */}
<Grid container>
{/* Project Logo */}
<Grid>
<a href={props.organizationUrl}>
<img alt='logo' style={{ display: 'block', margin: 'auto' }} src={props.organizationAvatarUrl} width='72px' />
</a>
</Grid>
<Grid style={{ marginTop: '25px' }}>
<a data-cy='project-url' href={props.projectUrl} style={{ color: 'black' }}>
<span>
<u>
{props.ownerName}/<b>{props.projectName}</b>
</u>
</span>
</a>
</Grid>
<Grid item xs={0} />
<Grid item xs={12} sm={6} style={{ marginLeft: '10px', marginTop: '25px' }}>
<Chip
variant="outlined"
size="small"
avatar={<Avatar alt="Natacha" src="/images/GithubEye.jpg" />}
label={"Watch " + props.watchers}
/>
<Chip
variant="outlined"
size="small"
avatar={<Avatar alt="Natacha" src="/images/GithubStar.jpg" />}
label={"Star " +props.stargazers}
/>
</Grid>
</Grid>
{/* Description & Project Link */}
<Grid container>
<Grid item xs={12} sm={12} style={{ paddingTop: '10px' }}>
<span>{props.projectDescription}</span>
</Grid>
<Grid item xs={12} sm={12} style={{ paddingTop: '10px' }}>
<span className='project' style={{ verticalAlign: 'middle' }}>
<img alt='link' src='/images/link.svg' /> <a href={props.homepage}>{props.homepage}</a>
</span>
</Grid>
{/* Update & Issue Count */}
<Grid container style={{ paddingTop: '10px' }}>
<Grid item xs={12} sm={4}>
<span>Updated {props.lastUpdate} day(s) ago</span>
</Grid>
<Grid item xs={12} sm={2}>
<span className={classes.issueStyles}>
<a href={props.issuesUrl}>
<b>{props.issueCount}</b> Open Issues
</a>
</span>
</Grid>
</Grid>
<Grid item xs={12} sm={12} style={{ paddingTop: '10px' }}>
<span>
<b>Affiliations Topic Tags:</b> {renderAffiliationsTopicsTags(props.projectTags, classes)}
</span>
</Grid>
<Grid item xs={12} sm={12} style={{ paddingTop: '10px' }}>
<span>
<b>Programming Language(s):</b> {renderLanguageChip(props.projectLanguage, classes)}{' '}
</span>
</Grid>
<Grid item xs={12} sm={12} style={{ paddingTop: '10px' }}>
<span>
<b>Topic Tags:</b> {renderTopicTags(props.topics,classes)}
</span>
</Grid>
</Grid>
</Grid>
</Grid>
</CardContent>
</Card>
);
}
|