{"size": 1065, "ext": "js", "max_stars_repo_path": "code/src/components/RepoCard.js", "max_stars_repo_name": "acidburn0zzz/git-me-up", "max_stars_repo_stars_event_min_datetime": "2019-04-28T07:02:50.000Z", "max_stars_repo_stars_event_max_datetime": "2021-09-01T12:57:53.000Z", "max_issues_repo_path": "code/src/components/RepoCard.js", "max_issues_repo_name": "wtjs/git-me-up", "max_issues_repo_issues_event_min_datetime": "2020-10-11T15:46:08.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T10:04:54.000Z", "max_forks_repo_path": "code/src/components/RepoCard.js", "max_forks_repo_name": "Acidburn0zzz/git-me-up", "max_forks_repo_forks_event_min_datetime": "2019-04-28T07:15:16.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-29T13:13:40.000Z"}
{"max_stars_count": 11, "max_issues_count": 5, "max_forks_count": 10, "avg_line_length": 20.8823529412, "max_line_length": 65, "alphanum_fraction": 0.5915492958}
import React from 'react';

import 'styled-components/macro';

import Avatar from './Avatar';
import Card from './Card';
import Tag from './Tag';

import starSvg from '../assets/star.svg';
import starSvgFilled from '../assets/star-filled.svg';

const RepoCard = ({ data }) => {
	const hasStarred = data.viewerHasStarred;

	return (
		<Card>
			<a className="star-wrapper">
				<img src={hasStarred ? starSvgFilled : starSvg} alt="star" />
			</a>
			<div
				css={{
					display: 'grid',
					gridTemplateColumns: 'auto 1fr',
					gridGap: 10,
					alignItems: 'center',
					fontSize: 14,
				}}
			>
				<Avatar src={data.owner.avatarUrl} width={30} height={30} />
				<a
					css={{ color: '#555' }}
					href={data.url}
					target="_blank"
					rel="noopener noreferrer"
				>
					{data.nameWithOwner}
				</a>
			</div>
			{data.repositoryTopics.edges.length ? (
				<div>
					{data.repositoryTopics.edges.map(({ node }) => (
						<Tag key={node.topic.id}>{node.topic.name}</Tag>
					))}
				</div>
			) : null}
		</Card>
	);
};

export default RepoCard;
