blog/src/components/organisms/Footer.tsx

import React, { useState } from 'react'
import Container from '../atoms/Container'
import Vcard from '../molecules/Vcard'
import Subscribe from '../molecules/Subscribe'
import ModalThanks from '../molecules/ModalThanks'

import { ReactComponent as Github } from '../../images/github.svg'
import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'

import styles from './Footer.module.scss'
import { useSiteMetadata } from '../../hooks/use-site-metadata'

export default function Footer() {
  const { name, uri, bitcoin, github } = useSiteMetadata()
  const year = new Date().getFullYear()
  const [showModal, setShowModal] = useState(false)

  const toggleModal = () => {
    setShowModal(!showModal)
  }

  return (
    <footer role="contentinfo" className={styles.footer}>
      <Container>
        <Vcard />
        <Subscribe />

        <section className={styles.copyright}>
          <p>
            &copy; 2005&ndash;
            {year + ' '}
            <a href={uri} rel="me">
              {name}
            </a>
          </p>

          <p>
            <a href={`${github}/blog`}>
              <Github />
              View source
            </a>
            <button className={styles.btc} onClick={toggleModal}>
              <Bitcoin />
              <code>{bitcoin}</code>
            </button>
          </p>

          {showModal && (
            <ModalThanks isOpen={showModal} handleCloseModal={toggleModal} />
          )}
        </section>
      </Container>
    </footer>
  )
}