fix(striker-ui): separate page containers from page implementation

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;

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;

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<typeof getServerSideProps>): JSX.Element {
   return (
-    <StyledPageContainer>
+    <PageContainer>
       <Header />
-      <StyledCenterContainer>
+      <PageCenterContainer>
         <List labelText="List of Anvils">
           {anvils.map(
             (anvil: AnvilListItem): JSX.Element => (
@@ -61,8 +37,8 @@ function DemoAnvilList({
             ),
           )}
         </List>
-      </StyledCenterContainer>
-    </StyledPageContainer>
+      </PageCenterContainer>
+    </PageContainer>
   );
 }