import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Text, ClickIcon } from '@bufferapp/components';
const Container = styled.span`
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.5rem 1rem;
svg {
margin: 0 0.5rem 0 0;
}
`;
const Beamer = styled.span`
display: inline-block;
padding: 0 1.5rem 0 0;
.beamer_icon {
background-color: #178eea !important;
}
`;
class NewsLink extends Component {
handleClick = () => {
document.getElementById('beamer').click();
}
render() {
return (
<Container onClick={this.handleClick}>
<ClickIcon />
<Beamer id="beamer">
<Text size="small" color="shuttleGray">
{this.props.children}
</Text>
</Beamer>
</Container>
);
}
}
NewsLink.propTypes = {
children: PropTypes.node.isRequired,
};
export default NewsLink;
|