News page refactor

src/pages/index.js

@@ -36,27 +36,61 @@ export default function Index (props) {
       })
   }, [])
 
+  const renderQAItem = (n, key) => {
+    return (
+      <div key={key} className={styles.itemContainer}>
+        <div className={styles.itemNumber}>
+          {key} :
+        </div>
+        <div
+          className={styles.question}
+          dangerouslySetInnerHTML={{ __html: n.q }}
+        />
+        <div
+          className={styles.answer}
+          dangerouslySetInnerHTML={{ __html: n.a }}
+        />
+      </div>
+    )
+  }
+
+  const renderNewsItem = (n, key) => {
+    return (
+      <div key={key} className={styles.itemContainer}>
+        <div className={styles.itemNumber}>
+          {key} :
+        </div>
+        <div
+          className={styles.newsTitle}
+          dangerouslySetInnerHTML={{ __html: n.title }}
+        />
+        <div
+          className={styles.newsBody}
+          dangerouslySetInnerHTML={{ __html: n.body }}
+        />
+      </div>
+    )
+  }
+
   const renderNews = () => {
     if (news) {
       let questions = Object.keys(news).map((key, i) => {
-        let q = news[key]
+        let n = news[key]
-        return (
+        if (n.q) {
-          <div key={key} className={styles.questioncontainer}>
+          return (
-            <div >
+            <div key={key}>
-              <div className={styles.questionnumber}>
+              {renderQAItem(n, key)}
-                {key}:
+              <hr />
-              </div>
-              <div
-                className={styles.question}
-                dangerouslySetInnerHTML={{ __html: q.q }}
-              />
-              <div
-                className={styles.answer}
-                dangerouslySetInnerHTML={{ __html: q.a }}
-              />
             </div>
-          </div>
+          )
-        )
+        } else {
+          return (
+            <div key={key}>
+              {renderNewsItem(n, key)}
+              <hr />
+            </div>
+          )
+        }
       }).reverse()
 
       return (
@@ -89,7 +123,6 @@ export default function Index (props) {
     <div>
       {renderMotd()}
       <center>
-
         {Object.keys(links).map((key) => {
           let link = links[key]
           return (

src/pages/index.module.css

@@ -21,32 +21,39 @@
   margin: 5px;
 }
 
-
+.itemContainer {
-.questioncontainer {
+  margin: 20px 5px;
-  margin: 5px;
 }
 
-.questioncontainer:hover {
+.itemContainer:hover {
   background-color: var(--hoover-color);
 }
 
-.questionscontainer {
+.newsBody {
-  margin: 10px;
+  margin: 0px 5px;
+  font-size: 18px;
+  color: #fff;
+}
+
+.newsTitle {
+  font-size: 28px;
+  color: var(--text-color);
+  margin: 0px 5px;
 }
 
 .question {
-  font-weight: 'bold';
+  font-weight: "bold";
   font-size: 16px;
   color: #fff;
-  margin: 5px;
+  margin: 0px 5px;
 }
 
 .answer {
-  margin: 5px;
+  margin: 0px 5px;
 }
 
-.questionnumber {
+.itemNumber {
   color: #fff;
-  margin: 5px;
+  margin: 0px 5px;
-  font-size: 20px;
+  font-size: 24px;
 }