77 lines
2.3 KiB
JavaScript
77 lines
2.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { bindActionCreators } from 'redux';
|
|
import styled from 'styled-components';
|
|
import Screen from '../../components/mobile/MobileScreen';
|
|
import Header from '../../components/mobile/Header';
|
|
import IconButton from '../../components/mobile/IconButton';
|
|
import { ExitIcon } from '../../common/icons';
|
|
import Footer from '../../components/mobile/Footer';
|
|
import { prop, remSize } from '../../theme';
|
|
import SketchList from '../IDE/components/SketchList';
|
|
import CollectionList from '../IDE/components/CollectionList';
|
|
import AssetList from '../IDE/components/AssetList';
|
|
import Content from './MobileViewContent';
|
|
|
|
const FooterTab = styled.div`
|
|
background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
|
|
color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
|
|
padding: ${remSize(16)};
|
|
width: 100%;
|
|
display: flex;
|
|
`;
|
|
|
|
const FooterTabContainer = styled.div`
|
|
display: flex;
|
|
|
|
h3 { text-align: center; width: 100%; }
|
|
`;
|
|
|
|
// switch (tabKey) {
|
|
// case TabKey.assets:
|
|
// return <AssetList key={username} username={username} />;
|
|
// case TabKey.collections:
|
|
// return <CollectionList key={username} username={username} />;
|
|
// case TabKey.sketches:
|
|
// default:
|
|
// return <SketchList key={username} username={username} />;
|
|
// }
|
|
|
|
const Panels = {
|
|
Sketches: () => <SketchList />,
|
|
Collections: () => <CollectionList />,
|
|
Assets: () => <AssetList />
|
|
};
|
|
|
|
const MobileExamples = () => {
|
|
// const tabs = ['Sketches', 'Collections', 'Assets'];
|
|
const Tabs = Object.keys(Panels);
|
|
const [selected, selectTab] = useState(Tabs[0]);
|
|
return (
|
|
<Screen fullscreen>
|
|
<Header inverted title="My Stuff">
|
|
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
|
|
</Header>
|
|
|
|
|
|
<Content>
|
|
{Panels[selected] && Panels[selected]()}
|
|
</Content>
|
|
|
|
|
|
<Footer>
|
|
<FooterTabContainer>
|
|
{Tabs.map(tab => (
|
|
<FooterTab
|
|
key={`tab-${tab}`}
|
|
selected={tab === selected}
|
|
onClick={() => selectTab(tab)}
|
|
>
|
|
<h3>{tab}</h3>
|
|
</FooterTab>))
|
|
}
|
|
</FooterTabContainer>
|
|
</Footer>
|
|
</Screen>);
|
|
};
|
|
|
|
export default MobileExamples;
|