fix(striker-ui): add basic style to anvil list

striker-ui/components/atoms/Label.tsx

@@ -0,0 +1,23 @@
+import { FunctionComponent } from 'react';
+import styled from 'styled-components';
+
+import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
+
+type LabelProps = {
+  text: string;
+};
+
+const StyledLabel = styled.span`
+  font-size: 1em;
+  color: ${(props) => props.theme.colors.primary};
+`;
+
+StyledLabel.defaultProps = {
+  theme: DEFAULT_THEME,
+};
+
+const Label: FunctionComponent<LabelProps> = ({ text }) => {
+  return <StyledLabel>{text}</StyledLabel>;
+};
+
+export default Label;

striker-ui/components/molecules/List.tsx

@@ -0,0 +1,23 @@
+import { FunctionComponent } from 'react';
+import styled from 'styled-components';
+
+import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
+
+type ListProps = {
+  isAlignHorizontal?: boolean;
+};
+
+const StyledList = styled.div<ListProps>`
+  display: flex;
+  flex-direction: ${(props) => (props.isAlignHorizontal ? 'row' : 'column')};
+`;
+
+StyledList.defaultProps = {
+  theme: DEFAULT_THEME,
+};
+
+const List: FunctionComponent<ListProps> = ({ children }) => {
+  return <StyledList>{children}</StyledList>;
+};
+
+export default List;

striker-ui/pages/demo-anvil-list.tsx

@@ -1,6 +1,11 @@
 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 Label from '../components/atoms/Label';
+import List from '../components/molecules/List';
 
 import fetchJSON from '../lib/fetchers/fetchJSON';
 
@@ -12,15 +17,31 @@ export async function getServerSideProps(): Promise<
   };
 }
 
+const StyledPageContainer = styled.div`
+  min-height: 100vh;
+  width: 100vw;
+
+  background-color: ${(props) => props.theme.colors.secondary};
+`;
+
+StyledPageContainer.defaultProps = {
+  theme: DEFAULT_THEME,
+};
+
 function DemoAnvilList({
   anvils,
 }: InferGetServerSidePropsType<typeof getServerSideProps>): JSX.Element {
   return (
-    <div>
-      <h1>Demo Anvil List</h1>
-      <h2>anvils</h2>
-      <pre>{JSON.stringify(anvils, null, 4)}</pre>
-    </div>
+    <StyledPageContainer>
+      <Label text="anvils" />
+      <List>
+        {anvils.map(
+          (anvil: AnvilListItem): JSX.Element => (
+            <Label key={anvil.uuid} text={anvil.uuid} />
+          ),
+        )}
+      </List>
+    </StyledPageContainer>
   );
 }