2020-01-08 18:16:13 +07:00
|
|
|
import React, { useContext } from 'react';
|
2019-12-19 03:30:42 +07:00
|
|
|
import styled from '@emotion/styled';
|
|
|
|
import Favorite from '@material-ui/icons/Favorite';
|
|
|
|
|
|
|
|
import Button from '../../muiComponents/Button';
|
|
|
|
import Link from '../Link';
|
2020-01-08 18:16:13 +07:00
|
|
|
import { isURL } from '../../utils/url';
|
2019-12-19 03:30:42 +07:00
|
|
|
import { Theme } from '../../design-tokens/theme';
|
2020-01-08 18:16:13 +07:00
|
|
|
import { DetailContext } from '../../pages/Version';
|
2019-12-19 03:30:42 +07:00
|
|
|
|
|
|
|
const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
|
|
|
|
marginTop: theme && theme.spacing(1),
|
|
|
|
marginBottom: theme && theme.spacing(1),
|
|
|
|
textDecoration: 'none',
|
|
|
|
display: 'block',
|
|
|
|
}));
|
|
|
|
|
|
|
|
const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
|
|
|
|
color: theme && theme.palette.orange,
|
|
|
|
}));
|
|
|
|
|
|
|
|
const StyledFundStrong = styled('strong')({
|
|
|
|
marginRight: 3,
|
|
|
|
});
|
|
|
|
|
|
|
|
/* eslint-disable react/jsx-no-bind */
|
2020-01-08 18:16:13 +07:00
|
|
|
const DetailSidebarFundButton: React.FC = () => {
|
|
|
|
const detailContext = useContext(DetailContext);
|
|
|
|
|
|
|
|
const { packageMeta } = detailContext;
|
|
|
|
|
|
|
|
const fundingUrl = packageMeta?.latest?.funding?.url as string;
|
|
|
|
|
|
|
|
if (!isURL(fundingUrl)) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2019-12-19 03:30:42 +07:00
|
|
|
return (
|
2020-01-08 18:16:13 +07:00
|
|
|
<StyledLink external={true} to={fundingUrl}>
|
|
|
|
<Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
|
2019-12-19 03:30:42 +07:00
|
|
|
<StyledFundStrong>{'Fund'}</StyledFundStrong>
|
|
|
|
{'this package'}
|
|
|
|
</Button>
|
|
|
|
</StyledLink>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default DetailSidebarFundButton;
|