git sync for colleagues.

All in 1 big commit :)...
Do as I say... not as I do (in my private stuff anyway)

src/components/filters/filter-list-item.tsx

@@ -0,0 +1,11 @@
+import React, { FunctionComponent } from "react";
+
+type Props = { label: string; link?: string; onClick?: () => {} };
+
+export const FilterListItem: FunctionComponent<Props> = ({ label, link, onClick }) => {
+  return (
+    <li onClick={onClick} key={link} className="filter">
+      {link !== undefined ? <a href={link}>{label}</a> : label}
+    </li>
+  );
+};

src/components/filters/filter-list.tsx

@@ -0,0 +1,11 @@
+import React, { FunctionComponent } from "react";
+
+type Props = {};
+
+export const FilterList: FunctionComponent<Props> = ({ children }) => {
+  return (
+    <ul id="filter-list" className="clearfix">
+      {children}
+    </ul>
+  );
+};

src/components/info-panel.tsx

@@ -0,0 +1,20 @@
+import { Pill } from "models/pill";
+import React, { FunctionComponent } from "react";
+import { InfoPill } from "./info-pill";
+import { SectionTitle } from "./section-title";
+
+type Props = { title: string; pills?: Pill[] };
+
+export const InfoPanel: FunctionComponent<Props> = ({ title, pills }) => {
+  return (
+    <div className="personal-info col-md-12 no-padding">
+      <SectionTitle>{title}</SectionTitle>
+      <ul>
+        {pills !== undefined &&
+          pills.map((pill: Pill) => {
+            return <InfoPill title={pill.key} value={pill.value} link={pill.link} key={pill.key} />;
+          })}
+      </ul>
+    </div>
+  );
+};

src/components/info-pill.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { FunctionComponent } from "react";
+
+type Props = { title: string; value: string; link: string; rest?: {} };
+
+export const InfoPill: FunctionComponent<Props> = ({ title, value, link, ...rest }) => {
+  return (
+    <li>
+      <div className="p-info">
+        <em>{title}</em>
+        <span>
+          {link !== undefined ? (
+            <a href={link} {...rest}>
+              {value}
+            </a>
+          ) : (
+            value
+          )}
+        </span>
+      </div>
+    </li>
+  );
+};

src/components/section-title.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { FunctionComponent } from "react";
+
+type Props = {};
+
+export const SectionTitle: FunctionComponent<Props> = ({ children }) => {
+  return (
+    <div>
+      <h4>{children}</h4>
+      <div className="sep2" />
+    </div>
+  );
+};

src/components/section.tsx

@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+import { SectionTitle } from "./section-title";
+
+type Props = { title: string };
+
+export const Section: FunctionComponent<Props> = ({ title, children }) => {
+  return (
+    <>
+      <SectionTitle>{title}</SectionTitle>
+      {children}
+    </>
+  );
+};

src/components/social-bar.tsx

@@ -0,0 +1,28 @@
+import React, { FunctionComponent } from "react";
+import socialMediaItems from "../data/social-media";
+type Props = {};
+
+export const SocialBar: FunctionComponent<Props> = () => {
+  return (
+    <div className="socialimages">
+      <span>
+        {socialMediaItems.map((socialButton) => {
+          return (
+            <a
+              key={socialButton.service}
+              className="socialimage"
+              href={socialButton.url}
+              data-icon-text={socialButton.text}
+            >
+              <img
+                src={socialButton.grayIcon}
+                alt={`${socialButton.service} black and gray overlay`}
+              />
+              <img src={socialButton.icon} alt={`${socialButton.service} color image`} />
+            </a>
+          );
+        })}
+      </span>
+    </div>
+  );
+};