post actions

src/components/atoms/PostActions.jsx

@@ -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

src/components/atoms/PostActions.module.scss

@@ -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;
+}

src/styles/_mixins.scss

@@ -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
 /////////////////////////////////////
 

src/templates/Post.jsx

@@ -8,6 +8,7 @@ import PostTitle from '../components/atoms/PostTitle'
 import PostLead from '../components/atoms/PostLead'
 import PostContent from '../components/atoms/PostContent'
 import PostMeta from '../components/molecules/PostMeta'
+import PostActions from '../components/atoms/PostActions'
 import styles from './Post.module.scss'
 
 const Post = ({ data, location }) => {
@@ -32,6 +33,8 @@ const Post = ({ data, location }) => {
 
         <PostContent post={post} />
 
+        <PostActions slug={post.fields.slug} url={meta.url} />
+
         <PostMeta post={post} meta={meta} />
       </article>
     </Layout>
@@ -80,6 +83,7 @@ export const pageQuery = graphql`
     }
 
     contentYaml {
+      url
       author {
         uri
       }