Split `Project` component into `ProjectDetail`

1 files changed, 54 insertions, 0 deletions

diff --git a/src/components/project-detail.js b/src/components/project-detail.js
new file mode 100644
index 0000000..f84a5c9
--- /dev/null
+++ b/src/components/project-detail.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import { css } from '@emotion/core'
+
+import { SplitContainer } from './split-container'
+import { Image } from './image'
+import { margins, breakpoints } from './globals'
+
+const descContainerStyle = css`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  @media (min-width: ${breakpoints[0].breakpoint}px) {
+    margin: 0 0 0 ${margins.md}px;
+    flex: 1;
+  }
+  & > * {
+    margin: 0 0 ${margins.md}px 0;
+  }
+`
+
+const imgContainerStyle = css`
+  display: flex;
+  & > *:not(:last-child) {
+    margin-right: ${margins.sm}px;
+  }
+`
+
+export const ProjectDetail = ({ listItems, header, images }) => (
+  <section
+    css={css`
+      width: 100%;
+      margin-bottom: ${margins.md}px;
+    `}
+  >
+    <SplitContainer>
+      <div css={descContainerStyle}>
+        {header ? <h4>{header}</h4> : null}
+        {listItems ? (
+          <ul>
+            {listItems.map((k, i) => (
+              <li key={`detail-item-${i}`}>{k}</li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+      <div css={imgContainerStyle}>
+        {images
+          ? images.map((k, i) => <Image key={`image-${i}`} {...k} />)
+          : null}
+      </div>
+    </SplitContainer>
+  </section>
+)