forked from acouzens/open5gs
update it
This commit is contained in:
Sukchan Lee
parent
1536a5c798
commit
b1af24f380
|
|
@ -1,5 +1,107 @@
|
|||
export default ({children}) => (
|
||||
<main>
|
||||
{children}
|
||||
</main>
|
||||
)
|
||||
import Package from '../package';
|
||||
import Head from 'next/head';
|
||||
|
||||
import styled from 'styled-components';
|
||||
import oc from 'open-color';
|
||||
import { media, transitions } from '../lib/style-utils';
|
||||
import MenuIcon from 'react-icons/lib/md/menu';
|
||||
import Thumbnail from './Thumbnail';
|
||||
|
||||
import Session from '../lib/session';
|
||||
import LogoutButton from '../components/logout-button';
|
||||
|
||||
const Header = styled.div`
|
||||
display: flex;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
background: ${oc.indigo[6]};
|
||||
color: white;
|
||||
border-bottom: 1px solid ${oc.indigo[7]};
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,0.10), 0 3px 6px rgba(0,0,0,0.20);
|
||||
`;
|
||||
|
||||
const HeaderMenu = styled.div`
|
||||
width: 3.0rem;
|
||||
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
`;
|
||||
|
||||
const HeaderTitle = styled.div`
|
||||
padding-left: 1rem;
|
||||
padding-top: 0.2rem;
|
||||
|
||||
font-size: 1.5rem;
|
||||
font-weight: 200;
|
||||
`;
|
||||
|
||||
const HeaderThumbnail = styled.div`
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
|
||||
font-size: 1.5rem;
|
||||
`;
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
background-color: yellow;
|
||||
border: 1px solid green;
|
||||
`
|
||||
|
||||
const Sidebar = styled.div`
|
||||
width: 10rem;
|
||||
height: 30rem;
|
||||
|
||||
margin: 10px;
|
||||
background-color: blue;
|
||||
border: 1px solid red;
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
flex: 1;
|
||||
height: 30rem;
|
||||
|
||||
margin: 10px;
|
||||
background-color: blue;
|
||||
border: 1px solid red;
|
||||
`;
|
||||
|
||||
const TempWrapper = styled.div`
|
||||
`;
|
||||
|
||||
const App = ({ session }) => {
|
||||
const title = 'Next, EPC ' + Package.version;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
</Head>
|
||||
|
||||
<Header>
|
||||
<HeaderMenu>
|
||||
<MenuIcon/>
|
||||
</HeaderMenu>
|
||||
<HeaderTitle>
|
||||
Next, EPC
|
||||
</HeaderTitle>
|
||||
<HeaderThumbnail>
|
||||
<Thumbnail size="2rem" color={oc['pink'][4]} />
|
||||
</HeaderThumbnail>
|
||||
</Header>
|
||||
<Container>
|
||||
<Sidebar/>
|
||||
<Content/>
|
||||
</Container>
|
||||
|
||||
<TempWrapper>
|
||||
<p>Welcome back {session.user.username}</p>
|
||||
<LogoutButton session={session}>Log out</LogoutButton>
|
||||
</TempWrapper>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -2,14 +2,9 @@ import styled from 'styled-components';
|
|||
import oc from 'open-color';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
z-index: 5;
|
||||
|
||||
background: ${oc.indigo[6]};
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
import Package from '../package';
|
||||
import Head from 'next/head';
|
||||
|
||||
import styled from 'styled-components';
|
||||
import oc from 'open-color';
|
||||
import { media, transitions } from '../lib/style-utils';
|
||||
|
||||
import Header from './Header';
|
||||
|
||||
import Session from '../lib/session';
|
||||
import LogoutButton from '../components/logout-button';
|
||||
|
||||
const Container = styled.div`
|
||||
padding-top: 60px;
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
margin: 0 auto;
|
||||
margin-top: 2rem;
|
||||
width: 1200px;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
|
||||
${media.desktop`
|
||||
width: 990px;
|
||||
`}
|
||||
|
||||
${media.tablet`
|
||||
margin-top: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
`}
|
||||
|
||||
${media.mobile`
|
||||
margin-top: 0.5rem;
|
||||
width: calc(100% - 1rem);
|
||||
`}
|
||||
`;
|
||||
|
||||
const Title = styled.div`
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
color: ${oc.pink[9]};
|
||||
font-weight: bold;
|
||||
font-size: 4 rem;
|
||||
`;
|
||||
|
||||
const Layout = ({ session, children }) => {
|
||||
const title = 'NextEPC ' + Package.version;
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
</Head>
|
||||
|
||||
<Header/>
|
||||
<Content>
|
||||
<Title>
|
||||
Hello World
|
||||
</Title>
|
||||
</Content>
|
||||
|
||||
<div>
|
||||
<p>Welcome back {session.user.username}</p>
|
||||
<LogoutButton session={session}>Log out</LogoutButton>
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
|
|
@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
|
|||
|
||||
import withSession from '../lib/with-session';
|
||||
import Login from '../components/Login';
|
||||
import Layout from '../components/Layout';
|
||||
import App from '../components/App';
|
||||
|
||||
const Restricted = (Component) => {
|
||||
const checkAuth = (props) => {
|
||||
|
|
@ -14,7 +14,7 @@ const Restricted = (Component) => {
|
|||
|
||||
const Index = Restricted(({session}) => (
|
||||
<div>
|
||||
<Layout session={session} />
|
||||
<App session={session} />
|
||||
</div>
|
||||
)
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue