News page refactor

src/pages/index.js

@@ -36,27 +36,61 @@ export default function Index (props) {
       })
   }, [])
 
-  const renderNews = () => {
+  const renderQAItem = (n, key) => {
-    if (news) {
-      let questions = Object.keys(news).map((key, i) => {
-        let q = news[key]
     return (
-          <div key={key} className={styles.questioncontainer}>
+      <div key={key} className={styles.itemContainer}>
-            <div >
+        <div className={styles.itemNumber}>
-              <div className={styles.questionnumber}>
           {key} :
         </div>
         <div
           className={styles.question}
-                dangerouslySetInnerHTML={{ __html: q.q }}
+          dangerouslySetInnerHTML={{ __html: n.q }}
         />
         <div
           className={styles.answer}
-                dangerouslySetInnerHTML={{ __html: q.a }}
+          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 n = news[key]
+        if (n.q) {
+          return (
+            <div key={key}>
+              {renderQAItem(n, key)}
+              <hr />
+            </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;
 }