Add icon for each topic

src/components/TopicVoter.tsx

@@ -3,15 +3,60 @@ import { jsx, css } from '@emotion/core';
 import React from 'react';
 import { mediaMaxWidth } from '../util';
 
-export default (props: { name: string, color: string}) => {
+export default (props: { name: string, color: string }) => {
+    let logo;
+
+    switch (props.name) {
+        case "การศึกษา": {
+            logo = require("./img/education.png");
+            break;
+        }
+        case "เศรษฐกิจ": {
+            logo = require("./img/economic.png");
+            break;
+        }
+        case "การเกษตร": {
+            logo = require("./img/agriculture.png");
+            break;
+        }
+        case "สาธารณสุข": {
+            logo = require("./img/medical.png");
+            break;
+        }
+        case "คมนาคม": {
+            logo = require("./img/transportation.png");
+            break;
+        }
+        case "เทคโนโลยี": {
+            logo = require("./img/technology.png");
+            break;
+        }
+        case "สิ่งแวดล้อม": {
+            logo = require("./img/environment.png");
+            break;
+        }
+        case "ความมั่นคง": {
+            logo = require("./img/security.png");
+            break;
+        }
+        case "ยุติธรรม": {
+            logo = require("./img/justice.png");
+            break;
+        }
+        default: {
+            logo = require("./img/default.png");
+            break;
+        }
+    }
     return (
-        <div css={{ width: '120px', textAlign: 'center'}}>
+        <div css={{ width: '120px', textAlign: 'center' }}>
             <div css={{
                 [mediaMaxWidth(768)]: { fontSize: '0.8em' }
             }}>
                 {props.name}
             </div>
             <div css={{ minHeight: '300px', margin: '10px 0', background: props.color || 'white' }}></div>
+            <div><img src={logo} alt={props.name} css={{ width: '80px', height: '80px' }}></img></div>
         </div>
     );
 }

src/pages/MainPage.tsx

@@ -5,19 +5,19 @@ import TopicVoter from '../components/TopicVoter';
 import { Link } from "react-router-dom";
 
 export default () => {
-    return (<div css={{ margin: '15vh 100px 100px'}}>
-        <h1 css={{ margin: '50px'}}>
+    return (<div css={{ margin: '15vh 100px 100px' }}>
+        <h1 css={{ margin: '50px' }}>
             <span css={{ fontSize: '2.5em' }}>
                 อยากให้
             </span>
-            <span css={{ margin: '0 30px', fontSize: '4.5em'}}>
+            <span css={{ margin: '0 30px', fontSize: '4.5em' }}>
                 ภาษี
             </span>
             <span css={{ fontSize: '2.5em' }}>
                 ไปไหน?
             </span>
         </h1>
-        <div css={{display: 'flex', justifyContent: 'space-between'}}>
+        <div css={{ display: 'flex', justifyContent: 'space-between' }}>
             {topic.map(item => {
                 return (<TopicVoter name={item.name} color={item.color} />);
             })}