mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-23 01:30:01 +01:00
post actions
This commit is contained in:
parent
23d2ea0ce8
commit
1ad607c43b
64
src/components/atoms/PostActions.jsx
Normal file
64
src/components/atoms/PostActions.jsx
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
import React, { PureComponent } from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import ModalThanks from '../molecules/ModalThanks'
|
||||||
|
import styles from './PostActions.module.scss'
|
||||||
|
|
||||||
|
import Twitter from '../svg/Twitter'
|
||||||
|
import Bitcoin from '../svg/Bitcoin'
|
||||||
|
|
||||||
|
class PostActions extends PureComponent {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
showModal: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleModal = () => {
|
||||||
|
this.setState({ showModal: !this.state.showModal })
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { url, slug } = this.props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className={styles.actions}>
|
||||||
|
<article className={styles.action}>
|
||||||
|
<Twitter />
|
||||||
|
<h1 className={styles.actionTitle}>Have a comment?</h1>
|
||||||
|
<p className={styles.actionText}>
|
||||||
|
Hit me up{' '}
|
||||||
|
<a
|
||||||
|
href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${url}${slug}`}
|
||||||
|
>
|
||||||
|
@kremalicious
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article className={styles.action}>
|
||||||
|
<Bitcoin />
|
||||||
|
<h1 className={styles.actionTitle}>Found something useful?</h1>
|
||||||
|
<p className={styles.actionText}>
|
||||||
|
Say thanks{' '}
|
||||||
|
<a href="#" onClick={this.toggleModal}>
|
||||||
|
with Bitcoins or Ether.
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<ModalThanks
|
||||||
|
isOpen={this.state.showModal}
|
||||||
|
handleCloseModal={this.toggleModal}
|
||||||
|
/>
|
||||||
|
</aside>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
PostActions.propTypes = {
|
||||||
|
slug: PropTypes.string.isRequired,
|
||||||
|
url: PropTypes.string.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PostActions
|
52
src/components/atoms/PostActions.module.scss
Normal file
52
src/components/atoms/PostActions.module.scss
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
@import 'variables';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
@include divider;
|
||||||
|
@include divider-top;
|
||||||
|
|
||||||
|
margin-top: $spacer * 3;
|
||||||
|
padding: $spacer * $line-height 0;
|
||||||
|
|
||||||
|
@media (min-width: $screen-xs) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action {
|
||||||
|
padding-left: 1.75rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-bottom: $spacer * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $screen-xs) {
|
||||||
|
flex: 1 1 48%;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: .2rem;
|
||||||
|
fill: $brand-grey-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionTitle {
|
||||||
|
font-size: $font-size-base;
|
||||||
|
line-height: $line-height;
|
||||||
|
color: $text-color;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionText {
|
||||||
|
font-size: $font-size-small;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
@ -99,6 +99,23 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin divider-top() {
|
||||||
|
position: relative;
|
||||||
|
border-top: 1px dashed #afc3cb;
|
||||||
|
margin-top: $spacer * $line-height;
|
||||||
|
margin-bottom: $spacer * $line-height;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px dashed #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Heading band
|
// Heading band
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
|
@ -8,6 +8,7 @@ import PostTitle from '../components/atoms/PostTitle'
|
|||||||
import PostLead from '../components/atoms/PostLead'
|
import PostLead from '../components/atoms/PostLead'
|
||||||
import PostContent from '../components/atoms/PostContent'
|
import PostContent from '../components/atoms/PostContent'
|
||||||
import PostMeta from '../components/molecules/PostMeta'
|
import PostMeta from '../components/molecules/PostMeta'
|
||||||
|
import PostActions from '../components/atoms/PostActions'
|
||||||
import styles from './Post.module.scss'
|
import styles from './Post.module.scss'
|
||||||
|
|
||||||
const Post = ({ data, location }) => {
|
const Post = ({ data, location }) => {
|
||||||
@ -32,6 +33,8 @@ const Post = ({ data, location }) => {
|
|||||||
|
|
||||||
<PostContent post={post} />
|
<PostContent post={post} />
|
||||||
|
|
||||||
|
<PostActions slug={post.fields.slug} url={meta.url} />
|
||||||
|
|
||||||
<PostMeta post={post} meta={meta} />
|
<PostMeta post={post} meta={meta} />
|
||||||
</article>
|
</article>
|
||||||
</Layout>
|
</Layout>
|
||||||
@ -80,6 +83,7 @@ export const pageQuery = graphql`
|
|||||||
}
|
}
|
||||||
|
|
||||||
contentYaml {
|
contentYaml {
|
||||||
|
url
|
||||||
author {
|
author {
|
||||||
uri
|
uri
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user