refactor: use CSS grids

Author: JeelRajodiya

app/components/HomePageLinks/HomePageLinks.module.css

@@ -1,26 +1,8 @@
-.column{
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
+/* grid of 4 rows  */
+.HomePageLinks {
+  display: grid;
+  grid-template-rows: repeat(4, 1fr);
+  gap: 16px;
+  column-gap: 32px;
+  grid-auto-flow: column;
 }
-
-.HomePageLinks{
-  width: 440px;
-  display: flex;
-  justify-content:center;
-  align-items: center;
-  gap: 4em;
-  position: relative;
-  padding-top: 2.5em;
-  color: hsl(var(--primary));
-}
-
-.HomePageLinkTitle{
-  text-decoration: underline;
-  text-underline-offset: 0.15em;
-  text-decoration-color: hsl(var(--primary) / 0.3);
-}
-
-.HomePageLinkTitle:hover {
-  text-decoration-color: hsl(var(--primary));
-}

app/components/HomePageLinks/HomePageLinks.tsx

@@ -1,44 +1,40 @@
 import { contentManager } from "@/lib/contentManager";
-import styles from "./HomePage.module.css";
+import styles from "./HomePageLinks.module.css";
 import Link from "next/link";
+import { useMemo } from "react";
+import CommunityLinksStyles from "@/app/components/CommunityLinks/CommunityLinks.module.css";
 
 export default function HomePageLinks() {
   const outline = contentManager.getOutline();
-
-  const half = Math.ceil(outline.length / 2);
-  const firstColumn = outline.slice(0, half);
-  const secondColumn = outline.slice(half);
+  const totalChapters = contentManager.getTotalChapters();
+  const chapterInfo: {
+    title: string;
+    link: string;
+  }[] = useMemo(() => {
+    const chapterInfo = [];
+    for (let i = 0; i < totalChapters; i++) {
+      const chapter = outline[i];
+      chapterInfo.push({
+        title: chapter.title,
+        link: contentManager.getPathWithPrefix(
+          chapter.steps[0].fullPath,
+        ) as string,
+      });
+    }
+    return chapterInfo;
+  }, []);
 
   return (
     <div className={styles.HomePageLinks}>
-      <div className={styles.column}>
-        {firstColumn.map((ele, index) => (
-          <Link
-            key={index}
-            className={styles.HomePageLink}
-            href={
-              contentManager.getPathWithPrefix(ele.steps[0].fullPath) as string
-            }
-          >
-            <span>{index + 1}. </span>
-            <span className={styles.HomePageLinkTitle}>{ele.title}</span>
-          </Link>
-        ))}
-      </div>
-      <div className={styles.column}>
-        {secondColumn.map((ele, index) => (
-          <Link
-            key={index + half + 1}
-            className={styles.HomePageLink}
-            href={
-              contentManager.getPathWithPrefix(ele.steps[0].fullPath) as string
-            }
-          >
-            <span>{index + half + 1}. </span>
-            <span className={styles.HomePageLinkTitle}>{ele.title}</span>
-          </Link>
-        ))}
-      </div>
+      {chapterInfo.map((chapter, index) => (
+        <Link
+          key={index}
+          href={chapter.link}
+          className={CommunityLinksStyles.footerLink}
+        >
+          {index + 1}. {chapter.title}
+        </Link>
+      ))}
     </div>
   );
 }