import React, { Fragment } from "react"
import { Styled, css } from "theme-ui"

const Footer = ({ socialLinks }) => (
  <footer
    css={css({
      mt: 4,
      pt: 3,
    })}
  >
    © {new Date().getFullYear()}, Powered by
    {` `}
    <a href="https://www.gatsbyjs.org">Gatsby</a>
    {` `}&bull;{` `}
    {socialLinks.map((platform, i, arr) => (
      <Fragment key={platform.url}>
        <Styled.a href={platform.url} target="_blank" rel="noopener noreferrer">
          {platform.name}
        </Styled.a>
        {arr.length - 1 !== i && (
          <Fragment>
            {` `}&bull;{` `}
          </Fragment>
        )}
      </Fragment>
    ))}
  </footer>
)
export default Footer

@@ -234,16 +234,23 @@
 %60%7D%0A    %3C
+Styled.
 a href=%22
@@ -283,16 +283,23 @@
 Gatsby%3C/
+Styled.
 a%3E%0A    %7B

Fix home-footer in Night mode (#19977)