import styled from 'styled-components' import t from 'prop-types' import { lighten, rgba } from 'polished' import { BoxIcon, StarIcon, LangIcon } from 'ui' export const IssueCard = ({ repo, position, title, description, stars, lang, url, }) => { return ( <Card href={url} target='_blank' rel='noopener noreferrer'> <Header> <Repo><BoxIcon /> {repo}</Repo> <Position>#{position < 10 ? `0${position}` : position}</Position> </Header> <Content> <Title>{title}</Title> </Content> <Footer> <Info><StarIcon /> {stars}</Info> </Footer> </Card> ) } IssueCard.propTypes = { repo: t.string.isRequired, position: t.number.isRequired, title: t.string.isRequired, stars: t.number.isRequired, url: t.string.isRequired, } const Card = styled.a` color: inherit; text-decoration: none; padding: 3.5rem; background-color: ${({ theme }) => lighten(0.07, theme.colors.background)}; transition: background-color .25s ease; display: block; cursor: pointer; &:hover, &:focus { background-color: ${({ theme }) => lighten(0.15, theme.colors.background)}; } ` const Repo = styled.div` font-size: 1.4rem; font-weight: 600; display: flex; align-items: center; color: ${({ theme }) => rgba(theme.colors.text, 0.5)}; ` const Header = styled.header` display: flex; align-items: center; justify-content: space-between; ` const Position = styled.span` font-size: 2rem; font-weight: 600; color: ${({ theme }) => theme.colors.primary}; ` const Content = styled.div` padding: 2rem 0 3rem; ` const Title = styled.h4` font-size: 2rem; font-weight: 600; margin-bottom: .5rem; ` const Text = styled.p` font-size: 1.6rem; line-height: 1.5; color: ${({ theme }) => rgba(theme.colors.text, 0.5)}; ` const Footer = styled.footer` display: flex; align-items: center; justify-content: flex-start; ` const Info = styled.span` font-size: 1.4rem; font-weight: 600; display: inline-flex; align-items: center; color: ${({ theme }) => rgba(theme.colors.text, 0.5)}; &:not(:last-child) { margin-right: 2rem; } `