diff --git a/striker-ui/components/organisms/PageCenterContainer.tsx b/striker-ui/components/organisms/PageCenterContainer.tsx new file mode 100644 index 00000000..8132f179 --- /dev/null +++ b/striker-ui/components/organisms/PageCenterContainer.tsx @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME'; + +const PageCenterContainer = styled.div` + width: 50%; + + padding-top: 1em; + + margin-left: auto; + margin-right: auto; + + > :not(:first-child) { + margin-top: 1em; + } +`; + +PageCenterContainer.defaultProps = { + theme: DEFAULT_THEME, +}; + +export default PageCenterContainer; diff --git a/striker-ui/components/organisms/PageContainer.tsx b/striker-ui/components/organisms/PageContainer.tsx new file mode 100644 index 00000000..fcb3fb20 --- /dev/null +++ b/striker-ui/components/organisms/PageContainer.tsx @@ -0,0 +1,16 @@ +import styled from 'styled-components'; + +import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME'; + +const PageContainer = styled.div` + min-height: 100vh; + width: 100vw; + + background-color: ${(props) => props.theme.colors.secondary}; +`; + +PageContainer.defaultProps = { + theme: DEFAULT_THEME, +}; + +export default PageContainer; diff --git a/striker-ui/pages/demo-anvil-list.tsx b/striker-ui/pages/demo-anvil-list.tsx index c4f3b71b..2ea624fd 100644 --- a/striker-ui/pages/demo-anvil-list.tsx +++ b/striker-ui/pages/demo-anvil-list.tsx @@ -1,12 +1,12 @@ import { GetServerSidePropsResult, InferGetServerSidePropsType } from 'next'; -import styled from 'styled-components'; import API_BASE_URL from '../lib/consts/API_BASE_URL'; -import DEFAULT_THEME from '../lib/consts/DEFAULT_THEME'; import Button from '../components/atoms/Button'; import Header from '../components/organisms/Header'; import List from '../components/molecules/List'; +import PageCenterContainer from '../components/organisms/PageCenterContainer'; +import PageContainer from '../components/organisms/PageContainer'; import fetchJSON from '../lib/fetchers/fetchJSON'; @@ -18,37 +18,13 @@ export async function getServerSideProps(): Promise< }; } -const StyledPageContainer = styled.div` - min-height: 100vh; - width: 100vw; - - background-color: ${(props) => props.theme.colors.secondary}; -`; - -const StyledCenterContainer = styled.div` - width: 50%; - - padding-top: 1em; - - margin-left: auto; - margin-right: auto; -`; - -StyledPageContainer.defaultProps = { - theme: DEFAULT_THEME, -}; - -StyledCenterContainer.defaultProps = { - theme: DEFAULT_THEME, -}; - function DemoAnvilList({ anvils, }: InferGetServerSidePropsType): JSX.Element { return ( - +
- + {anvils.map( (anvil: AnvilListItem): JSX.Element => ( @@ -61,8 +37,8 @@ function DemoAnvilList({ ), )} - - + + ); }