p5.js-web-editor/client/components/mobile/Footer.jsx
2020-07-15 17:32:38 -03:00

42 lines
875 B
JavaScript

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { prop, remSize } from '../../theme';
const background = prop('MobilePanel.default.background');
const textColor = prop('primaryTextColor');
const FooterWrapper = styled.div`
position: fixed;
width: 100%;
bottom: 0;
`;
const FooterContent = styled.div`
background: ${background};
color: ${textColor};
padding: ${remSize(12)};
padding-left: ${remSize(32)};
`;
const Footer = ({ before, children }) => (
<FooterWrapper>
{before}
<FooterContent>
{children}
</FooterContent>
</FooterWrapper>
);
Footer.propTypes = {
before: PropTypes.element,
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
};
Footer.defaultProps = {
before: <></>,
children: <></>
};
export default Footer;