refactor(Communities): seperate data from component

Author: Vyogami

public/data/communities.json

@@ -0,0 +1,32 @@
+[
+    {
+        "name": "Pydelhi",
+        "logo": "assets/images/communities/pydelhi.png",
+        "link": "https://pydelhi.org",
+        "outline": true
+    },
+    {
+        "name": "RustDelhi",
+        "logo": "assets/images/communities/rustdelhi.png",
+        "link": "https://rustdelhi.in",
+        "outline": false
+    },
+    {
+        "name": "India Linux User Group",
+        "logo": "assets/images/communities/ilugd.png",
+        "link": "https://linuxdelhi.org/",
+        "outline": true
+    },
+    {
+        "name": "Foss United Foundation",
+        "logo": "assets/images/communities/foss-united.png",
+        "link": "https://fossunited.org/",
+        "outline": false
+    },
+    {
+        "name": "Ubucon Asia",
+        "logo": "assets/images/communities/ubucon.png",
+        "link": "https://2024.ubucon.asia/",
+        "outline": false
+    }
+]

src/components/Community/Community.jsx

@@ -1,10 +1,23 @@
 import { useState, useEffect } from "react"
 import styles from "./Community.module.css"
 
-/**
- * @return {JSX.Element} The rendered Community component.
- */
 const Community = () => {
+  const [communities, setCommunities] = useState([])
+
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+  async function fetchData() {
+    try {
+      const response = await fetch("/data/communities.json")
+      const data = await response.json()
+      setCommunities(data)
+    } catch (error) {
+      console.error("Error fetching community data:", error)
+    }
+  }
+
   return (
     <div id="community" className={styles.community}>
       <h1 className={styles.community__title}>
@@ -16,41 +29,22 @@ const Community = () => {
         Partners!
       </h1>
       <div className={styles.powered}>
-        <a href="https://pydelhi.org" target="_blank" rel="no noreferrer">
-          <img
-            className={`${styles.community__chapter} ${styles.outline}`}
-            src="assets/images/communities/pydelhi.png"
-            alt="Pydelhi"
-          />
-        </a>
-        <a href="https://rustdelhi.in" target="_blank" rel="no noreferrer">
-          <img
-            className={styles.community__chapter}
-            src="assets/images/communities/rustdelhi.png"
-            alt="RustDelhi"
-          />
-        </a>
-        <a href="https://linuxdelhi.org/" target="_blank" rel="no noreferrer">
-          <img
-            className={`${styles.community__chapter} ${styles.outline}`}
-            src="assets/images/communities/ilugd.png"
-            alt="India Linux User Group"
-          />
-        </a>
-        <a href="https://fossunited.org/" target="_blank" rel="no noreferrer">
-          <img
-            className={styles.community__chapter}
-            src="assets/images/communities/foss-united.png"
-            alt="Foss United Foundation"
-          />
-        </a>
-        <a href="https://2024.ubucon.asia/" target="_blank" rel="no noreferrer">
-          <img
-            className={styles.community__chapter}
-            src="/assets/images/communities/ubucon.png"
-            alt="Ubucon Asia"
-          />
-        </a>
+        {communities.map((community) => (
+          <a
+            key={community.name}
+            href={community.link}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              className={`${styles.community__chapter} ${
+                community.outline ? styles.outline : ""
+              }`}
+              src={community.logo}
+              alt={community.name}
+            />
+          </a>
+        ))}
       </div>
     </div>
   )