mirror of https://github.com/kremalicious/blog.git
116 lines
2.6 KiB
JavaScript
116 lines
2.6 KiB
JavaScript
import React, { PureComponent } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import ModalThanks from '../molecules/ModalThanks'
|
|
import styles from './PostActions.module.scss'
|
|
|
|
import { ReactComponent as Twitter } from '../../images/twitter.svg'
|
|
import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
|
|
import { ReactComponent as GitHub } from '../../images/github.svg'
|
|
|
|
const ActionContent = ({ title, text, textLink }) => (
|
|
<>
|
|
<h1 className={styles.actionTitle}>{title}</h1>
|
|
<p className={styles.actionText}>
|
|
{text} <span className={styles.link}>{textLink}</span>
|
|
</p>
|
|
</>
|
|
)
|
|
|
|
ActionContent.propTypes = {
|
|
title: PropTypes.string,
|
|
text: PropTypes.string,
|
|
textLink: PropTypes.string
|
|
}
|
|
|
|
const ActionTwitter = ({ url, slug }) => (
|
|
<a
|
|
className={styles.action}
|
|
href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${url}${slug}`}
|
|
>
|
|
<Twitter />
|
|
<ActionContent
|
|
title="Have a comment?"
|
|
text="Hit me up"
|
|
textLink="@kremalicious"
|
|
/>
|
|
</a>
|
|
)
|
|
|
|
ActionTwitter.propTypes = {
|
|
url: PropTypes.string.isRequired,
|
|
slug: PropTypes.string.isRequired
|
|
}
|
|
|
|
const ActionCrypto = ({ toggleModal }) => (
|
|
<button className={styles.action} onClick={toggleModal}>
|
|
<Bitcoin />
|
|
<ActionContent
|
|
title="Found something useful?"
|
|
text="Say thanks with"
|
|
textLink="Bitcoins or Ether"
|
|
/>
|
|
</button>
|
|
)
|
|
|
|
ActionCrypto.propTypes = {
|
|
toggleModal: PropTypes.func.isRequired
|
|
}
|
|
|
|
const ActionGitHub = ({ githubLink }) => (
|
|
<a className={styles.action} href={githubLink}>
|
|
<GitHub />
|
|
<ActionContent
|
|
title="Edit on GitHub"
|
|
text="Contribute to this post on"
|
|
textLink="GitHub"
|
|
/>
|
|
</a>
|
|
)
|
|
|
|
ActionGitHub.propTypes = {
|
|
githubLink: PropTypes.string.isRequired
|
|
}
|
|
|
|
export default class PostActions extends PureComponent {
|
|
state = {
|
|
showModal: false
|
|
}
|
|
|
|
static propTypes = {
|
|
slug: PropTypes.string.isRequired,
|
|
url: PropTypes.string.isRequired,
|
|
githubLink: PropTypes.string.isRequired
|
|
}
|
|
|
|
toggleModal = () => {
|
|
this.setState({ showModal: !this.state.showModal })
|
|
}
|
|
|
|
render() {
|
|
const { url, slug, githubLink } = this.props
|
|
|
|
return (
|
|
<aside className={styles.actions}>
|
|
<div>
|
|
<ActionTwitter url={url} slug={slug} />
|
|
</div>
|
|
|
|
<div>
|
|
<ActionCrypto toggleModal={this.toggleModal} />
|
|
</div>
|
|
|
|
<div>
|
|
<ActionGitHub githubLink={githubLink} />
|
|
</div>
|
|
|
|
{this.state.showModal && (
|
|
<ModalThanks
|
|
isOpen={this.state.showModal}
|
|
handleCloseModal={this.toggleModal}
|
|
/>
|
|
)}
|
|
</aside>
|
|
)
|
|
}
|
|
}
|