97 lines
2.0 KiB
JavaScript
97 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import Container from './container';
|
|
|
|
import theme from '../theme';
|
|
import { mq } from '../utils';
|
|
|
|
const Root = styled.footer`
|
|
background: white;
|
|
padding-top: ${theme.space[4]};
|
|
padding-bottom: ${theme.space[5]};
|
|
`;
|
|
|
|
const FooterGrid = styled.div`
|
|
text-align: center;
|
|
|
|
${mq[2]} {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: left;
|
|
}
|
|
`;
|
|
|
|
const FooterButtons = styled.div`
|
|
margin-bottom: ${theme.space[3]};
|
|
${mq[2]} {
|
|
margin-bottom: 0;
|
|
}
|
|
`;
|
|
|
|
const SocialButton = styled.a`
|
|
display: inline-block;
|
|
padding: ${theme.space[1]} ${theme.space[3]};
|
|
background-color: ${theme.colors.lightishGray};
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: ${theme.fontsize[2]};
|
|
border-radius: ${theme.radii[1]};
|
|
margin-right: ${theme.space[2]};
|
|
|
|
&:active,
|
|
&:hover {
|
|
background-color: ${theme.colors.darkGreen};
|
|
}
|
|
`;
|
|
|
|
const Info = styled.div`
|
|
font-size: ${theme.fontsize[1]};
|
|
color: ${theme.colors.gray};
|
|
opacity: 0.5;
|
|
|
|
${mq[2]} {
|
|
padding-left: ${theme.space[4]};
|
|
}
|
|
|
|
a {
|
|
font-weight: 700;
|
|
color: ${theme.colors.gray};
|
|
}
|
|
`;
|
|
|
|
const Footer = ({ buttons }) => (
|
|
<Root>
|
|
<Container>
|
|
<FooterGrid>
|
|
<FooterButtons>
|
|
{buttons.map(btn => (
|
|
<SocialButton href={btn.url} key={btn.url}>
|
|
{btn.name}
|
|
</SocialButton>
|
|
))}
|
|
</FooterButtons>
|
|
<Info>
|
|
<p>
|
|
<a
|
|
href="https://github.com/netlify/netlify-cms/blob/master/LICENSE"
|
|
className="text-link"
|
|
>
|
|
Distributed under MIT License
|
|
</a>{' '}
|
|
·{' '}
|
|
<a
|
|
href="https://github.com/netlify/netlify-cms/blob/master/CODE_OF_CONDUCT.md"
|
|
className="text-link"
|
|
>
|
|
Code of Conduct
|
|
</a>
|
|
</p>
|
|
</Info>
|
|
</FooterGrid>
|
|
</Container>
|
|
</Root>
|
|
);
|
|
|
|
export default Footer;
|