Create page section component

src/components/PageSection/PageSection.scss

@@ -0,0 +1,19 @@
+@import "../../assets/scss/globals";
+
+.page-section {
+  padding: 2rem 1rem;
+  background-color: $dark-blue;
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: flex-start;
+
+  &.dark-blue {
+    background-color: $dark-blue;
+    color: $white;
+  }
+
+  &.white {
+    background-color: $white;
+    color: $dark-blue;
+  }
+}

src/components/PageSection/PageSection.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import "./PageSection.scss";
+
+export enum BackgroundColor {
+  DarkBlue,
+  White,
+}
+
+export interface PageSectionProps {
+  backgroundColor: BackgroundColor;
+}
+export interface PageSectionState {}
+
+const colorToClass = (color: BackgroundColor): string => {
+  if (color === BackgroundColor.DarkBlue) {
+    return "dark-blue";
+  }
+  else if (color === BackgroundColor.White) {
+    return "white";
+  }
+};
+
+class PageSection extends React.Component<PageSectionProps, PageSectionState> {
+  render() {
+    const { backgroundColor, children } = this.props;
+    const className = `page-section ${colorToClass(backgroundColor)}`;
+    return (
+      <div className={className}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default PageSection;

src/components/PageSection/index.ts

@@ -0,0 +1,2 @@
+import PageSection from "./PageSection";
+export default PageSection;