p5.js-web-editor/client/modules/IDE/pages/IDEViewMobile.jsx

49 lines
1 KiB
React
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Link } from 'react-router';
2020-06-09 20:35:06 +00:00
import { prop, remSize } from '../../../theme';
const background = prop('Button.default.background');
const textColor = prop('primaryTextColor');
const Header = styled.div`
width: 100%;
background-color: ${background};
2020-06-09 20:35:06 +00:00
color: ${textColor};
padding-left: ${remSize(32)};
`;
const Footer = styled.div`
width: 100%;
position: absolute;
bottom: 0;
2020-06-09 20:35:06 +00:00
background: ${background};
color: ${textColor};
padding-left: ${remSize(32)};
`;
const Screen = ({ children }) => (
<div className="fullscreen-preview">
{children}
</div>
);
Screen.propTypes = {
children: PropTypes.node.isRequired
};
export default () => (
<Screen>
2020-06-09 20:35:06 +00:00
<Header><h1>Mobile View</h1></Header>
2020-06-09 20:35:06 +00:00
<h3>
<br />This page is under construction.
2020-06-12 19:36:31 +00:00
<br /><Link to="/">Click here</Link> to return to the regular editor
2020-06-09 20:35:06 +00:00
</h3>
2020-06-09 20:35:06 +00:00
<Footer><h1>Bottom Bar</h1></Footer>
</Screen>
);