diff --git a/src/components/Divider.js b/src/components/Divider.js new file mode 100644 index 0000000..a9619cc --- /dev/null +++ b/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}; +` diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 1519f44..555d7f6 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -22,7 +22,7 @@ const menues = [ { name: "source", route: "/source", - label: "ข้อมูลเรามาจากไหน", + label: "เกี่ยวกับ ELECT Live", }, ] diff --git a/src/components/Typo.js b/src/components/Typo.js new file mode 100644 index 0000000..6b19ce3 --- /dev/null +++ b/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}; +` diff --git a/src/pages/source.js b/src/pages/source.js index c89dbb3..f6c1cf9 100644 --- a/src/pages/source.js +++ b/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 () => ( -

Data Source

-

Where we got our data?

+
+ + เกี่ยวกับ ELECT Live + + ที่มาของข้อมูล + + ข้อมูลที่ใช้ 'มาจาก กกต.' โดยจะทยอยส่งเข้ามาจากทุกหน่วยเลือกตั้ง กว่า + 90,000 หน่วยเลือกตั้งทั่วประเทศ เมื่อนับคะแนนแต่ละหน่วยเสร็จสิ้น + (โดยคะแนนจะเริ่มทยอยเข้ามาตั้งแต่เวลา 18.00 น. และคาดว่าจะสิ้นสุดในเวลา + 21.30 น. โดยประมาณ) + + ความคลาดเคลื่อนของข้อมูล + + ข้อมูลทั้งหมดเป็นการนับคะแนน 'อย่างไม่เป็นทางการ' ซึ่ง + กกต.จะต้องตรวจสอบอีกครั้ง ก่อนประกาศรับรองผลภายหลังทีละเขต จนครบ 350 เขต + ซึ่งเป็นไปได้ว่าบางเขตอาจต้องเลือกตั้งใหม่ ทำให้จำนวน ส.ส. + ของแต่ละพรรคสามารถเปลี่ยนแปลงได้ + + การหยุดนับคะแนน + + เนื่องจากเป็นข้อมูลการนับคะแนนอย่างไม่เป็นทางการ กกต. + จะยุติการส่งข้อมูลให้เมื่อถึง 95% ของทุกเขตเลือกตั้งทั่วประเทศ + เพื่อป้องกันปัญหาการฟ้องร้องภายหลัง + เพราะเป็นไปได้ที่บางเขตเลือกตั้งจะชนะกันด้วยคะแนนฉิวเฉียด + ที่ผลอาจเปลี่ยนแปลงได้เมื่อมีการนับคะแนนอย่างเป็นทางการ + + + ผู้จัดทำ + + Developer: Steve Underwood, Daisy Jones, Larry Green + + + Data Scientist: Daisy Jones + + + Designer: Larry Green + + + Business Analyst: Larry Green + +
) diff --git a/src/styles/utils.js b/src/styles/utils.js new file mode 100644 index 0000000..8b5c565 --- /dev/null +++ b/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)}; +`