Add data source page

src/components/Divider.js

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled"
+import { dynamicMargin } from "../styles/utils"
+
+export default styled.div`
+  border-bottom: 1px solid #979797;
+
+  ${dynamicMargin};
+`

src/components/NavBar.js

@@ -22,7 +22,7 @@ const menues = [
   {
     name: "source",
     route: "/source",
-    label: "ข้อมูลเรามาจากไหน",
+    label: "เกี่ยวกับ ELECT Live",
   },
 ]
 

src/components/Typo.js

@@ -0,0 +1,27 @@
+import styled from "@emotion/styled"
+import { dynamicMargin } from "../styles/utils"
+import { DISPLAY_FONT } from "../styles"
+
+export const Title = styled.h1`
+  font-family: ${DISPLAY_FONT};
+  font-size: 34px;
+  font-weight: 500;
+  color: #000000;
+  margin: 0;
+
+  ${dynamicMargin};
+`
+export const SubTitle = styled.h2`
+  font-family: ${DISPLAY_FONT};
+  font-size: 20px;
+  font-weight: 500;
+  color: #000000;
+  margin: 0;
+
+  ${dynamicMargin};
+`
+export const BodyText = styled.p`
+  margin: 0;
+
+  ${dynamicMargin};
+`

src/pages/source.js

@@ -1,10 +1,52 @@
 import React from "react"
 import MainLayout from "../components/MainLayout"
+import { Title, SubTitle, BodyText } from "../components/Typo"
+import Divider from "../components/Divider"
+
+const containerSize = 516
 
-// @todo #1 Add content about where we got the data from
 export default () => (
   <MainLayout activeNavBarSection="source">
-    <h1>Data Source</h1>
-    <p>Where we got our data?</p>
+    <div css={{ maxWidth: containerSize, margin: "0 auto" }}>
+      <Title mt={16} mb={8}>
+        เกี่ยวกับ ELECT Live
+      </Title>
+      <SubTitle mb={8}>ที่มาของข้อมูล</SubTitle>
+      <BodyText mb={32}>
+        ข้อมูลที่ใช้ 'มาจาก กกต.' โดยจะทยอยส่งเข้ามาจากทุกหน่วยเลือกตั้ง กว่า
+        90,000 หน่วยเลือกตั้งทั่วประเทศ เมื่อนับคะแนนแต่ละหน่วยเสร็จสิ้น
+        (โดยคะแนนจะเริ่มทยอยเข้ามาตั้งแต่เวลา 18.00 น. และคาดว่าจะสิ้นสุดในเวลา
+        21.30 น. โดยประมาณ)
+      </BodyText>
+      <SubTitle mb={8}>ความคลาดเคลื่อนของข้อมูล</SubTitle>
+      <BodyText mb={32}>
+        ข้อมูลทั้งหมดเป็นการนับคะแนน 'อย่างไม่เป็นทางการ' ซึ่ง
+        กกต.จะต้องตรวจสอบอีกครั้ง ก่อนประกาศรับรองผลภายหลังทีละเขต จนครบ 350 เขต
+        ซึ่งเป็นไปได้ว่าบางเขตอาจต้องเลือกตั้งใหม่ ทำให้จำนวน ส.ส.
+        ของแต่ละพรรคสามารถเปลี่ยนแปลงได้
+      </BodyText>
+      <SubTitle mb={8}>การหยุดนับคะแนน</SubTitle>
+      <BodyText mb={32}>
+        เนื่องจากเป็นข้อมูลการนับคะแนนอย่างไม่เป็นทางการ กกต.
+        จะยุติการส่งข้อมูลให้เมื่อถึง 95% ของทุกเขตเลือกตั้งทั่วประเทศ
+        เพื่อป้องกันปัญหาการฟ้องร้องภายหลัง
+        เพราะเป็นไปได้ที่บางเขตเลือกตั้งจะชนะกันด้วยคะแนนฉิวเฉียด
+        ที่ผลอาจเปลี่ยนแปลงได้เมื่อมีการนับคะแนนอย่างเป็นทางการ
+      </BodyText>
+      <Divider mb={32} />
+      <SubTitle mb={8}>ผู้จัดทำ</SubTitle>
+      <BodyText>
+        <b>Developer</b>: Steve Underwood, Daisy Jones, Larry Green
+      </BodyText>
+      <BodyText>
+        <b>Data Scientist</b>: Daisy Jones
+      </BodyText>
+      <BodyText>
+        <b>Designer</b>: Larry Green
+      </BodyText>
+      <BodyText>
+        <b>Business Analyst</b>: Larry Green
+      </BodyText>
+    </div>
   </MainLayout>
 )

src/styles/utils.js

@@ -0,0 +1,10 @@
+import { css } from "@emotion/core"
+
+const unitParser = x => (typeof x === "number" ? `${x}px` : x)
+
+export const dynamicMargin = ({ mt, mr, mb, ml }) => css`
+  margin-top: ${unitParser(mt)};
+  margin-right: ${unitParser(mr)};
+  margin-bottom: ${unitParser(mb)};
+  margin-left: ${unitParser(ml)};
+`