69 lines
1.6 KiB
JavaScript
69 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import moment from 'moment';
|
|
import styled from '@emotion/styled';
|
|
import { css } from '@emotion/core';
|
|
|
|
import Markdownify from '../components/markdownify';
|
|
import theme from '../theme';
|
|
|
|
const ReleaseLink = styled.a`
|
|
color: white;
|
|
display: block;
|
|
padding: ${theme.space[2]} ${theme.space[3]};
|
|
border-radius: ${theme.radii[1]};
|
|
height: 100%;
|
|
&:hover {
|
|
background: ${theme.colors.darkGray};
|
|
}
|
|
`;
|
|
|
|
const Version = styled.span`
|
|
background: ${theme.colors.shadeBlue};
|
|
font-size: ${theme.fontsize[1]};
|
|
padding: 0 ${theme.space[1]};
|
|
border-radius: ${theme.radii[1]};
|
|
font-weight: 700;
|
|
margin-right: ${theme.space[2]};
|
|
color: ${theme.colors.gray};
|
|
`;
|
|
|
|
const Release = ({ version, versionPrevious, date, description, url }) => {
|
|
const displayDate = moment(date).format('MMMM D, YYYY');
|
|
const defaultUrl = `https://github.com/netlify/netlify-cms/compare/netlify-cms@${versionPrevious}...netlify-cms@${version}`;
|
|
|
|
return (
|
|
<li
|
|
css={css`
|
|
flex: 1;
|
|
`}
|
|
>
|
|
<ReleaseLink href={url || defaultUrl}>
|
|
<div
|
|
css={css`
|
|
margin-bottom: ${theme.space[1]};
|
|
`}
|
|
>
|
|
<Version>{version}</Version>
|
|
<span
|
|
css={css`
|
|
font-size: ${theme.fontsize[1]};
|
|
color: rgba(255, 255, 255, 0.6);
|
|
`}
|
|
>
|
|
{displayDate}
|
|
</span>
|
|
</div>
|
|
<span
|
|
css={css`
|
|
font-size: ${theme.fontsize[2]};
|
|
`}
|
|
>
|
|
<Markdownify source={description} />
|
|
</span>
|
|
</ReleaseLink>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export default Release;
|