feat: add <DonateButton/>

src/components/DonateButton.js

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import PropTypes from 'prop-types'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPaypal } from '@fortawesome/free-brands-svg-icons/faPaypal'
+import { faCcVisa } from '@fortawesome/free-brands-svg-icons/faCcVisa'
+import { faCcMastercard } from '@fortawesome/free-brands-svg-icons/faCcMastercard'
+import { faCcAmex } from '@fortawesome/free-brands-svg-icons/faCcAmex'
+import Link from '@components/Link'
+
+export const DonateButton = ({ paymentOptions = false, ...props }) => (
+  <div>
+    <Link {...props} />
+
+    {!!paymentOptions && (
+      <div sx={{ display: `flex` }}>
+        <FontAwesomeIcon icon={faPaypal} />
+        <FontAwesomeIcon icon={faCcVisa} />
+        <FontAwesomeIcon icon={faCcMastercard} />
+        <FontAwesomeIcon icon={faCcAmex} />
+      </div>
+    )}
+  </div>
+)
+
+DonateButton.propTypes = {
+  paymentOptions: PropTypes.bool,
+}

src/layouts/index.js

@@ -4,6 +4,8 @@
  */
 import React from 'react'
 import { MDXProvider } from '@mdx-js/react'
+import Link from '@components/Link'
+import DonateButton from '@components/DonateButton'
 // import { VideoPlayer } from '@gaiama/react-video-player'
 // import { TableOfContents } from "@gaiama/react-mdx-table-of-contents"
 
@@ -13,6 +15,13 @@ import { MDXProvider } from '@mdx-js/react'
 // }
 
 /* components={{ VideoPlayer }} */
-const Layout = ({ children }) => <MDXProvider>{children}</MDXProvider>
+const components = {
+  Link,
+  DonateButton,
+}
+
+const Layout = ({ children }) => (
+  <MDXProvider components={components}>{children}</MDXProvider>
+)
 
 export default Layout