fix: builders profile links

-Disabled links and dimmed opacity
 for builders without profile pages,
 ensuring users aren't redirected to
 404 pages.
-Highlighted addresses of builders
 with completed profile pages, making
 it easy to spot active profiles.

packages/nextjs/app/builders/_components/MembersList.tsx

@@ -1,10 +1,19 @@
+"use client";
+
 import React from "react";
 import Link from "next/link";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import { Address } from "~~/components/scaffold-eth";
-import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
+import { useScaffoldEventHistory, useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+
+const MembersList = ({ builders }: { builders: string[] }) => {
+  // Getting the list of builders who have completed their check-in.
+  const { data: checkedInnBuilders, isLoading: loading } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "checkedInCounter",
+  });
 
-const MembersList = () => {
+  // Getting the list of builders' address list who have completed their check-in.
   const { data: MembersList } = useScaffoldEventHistory({
     contractName: "BatchRegistry",
     eventName: "CheckedIn",
@@ -16,22 +25,50 @@ const MembersList = () => {
   console.log("list", MembersList);
 
   return (
-    <div className=" flex justify-center flex-row flex-wrap gap-x-5 md:mx-[200px]">
-      {!MembersList && (
-        <div className=" animate-spin text-lg">
-          <AiOutlineLoading3Quarters />
-        </div>
-      )}
-      {MembersList?.map((member, i) => {
-        return (
-          <Link key={i} href={`/builders/${member?.args?.builder}`}>
-            <div className="bg-primary-content text-secondary px-3 py-2 rounded-[10px] my-3 shadow-xl">
-              <Address address={member?.args?.builder} />
+    <>
+      <div className="flex items-center gap-x-2 md:mb-8 mb-5">
+        <p className="text-lg font-normal text-[25px]">Builders :</p>
+        <p className="text-lg font-bold text-[24px]">
+          {loading ? (
+            <div className="animate-spin text-lg">
+              <AiOutlineLoading3Quarters />
             </div>
-          </Link>
-        );
-      })}
-    </div>
+          ) : (
+            checkedInnBuilders?.toString()
+          )}
+        </p>
+      </div>
+
+      <div className="flex justify-center flex-row flex-wrap gap-x-5 md:mx-[200px]">
+        {!MembersList && (
+          <div className="animate-spin text-lg">
+            <AiOutlineLoading3Quarters />
+          </div>
+        )}
+
+        {MembersList?.map((member, i) => {
+          const address = member?.args?.builder;
+          const isFileSystemAddress = address ? builders.includes(address) : false;
+          return (
+            <Link
+              className={`${!isFileSystemAddress && "opacity-40 shadow-none pointer-events-none"}`}
+              key={i}
+              href={isFileSystemAddress ? `/builders/${address}` : "#"}
+              passHref={!isFileSystemAddress}
+            >
+              <div
+                className={`bg-primary-content text-secondary px-3 py-2 rounded-[10px] my-3 shadow-xl `}
+                style={{
+                  pointerEvents: isFileSystemAddress ? "auto" : "none",
+                }}
+              >
+                <Address address={address} />
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </>
   );
 };
 

packages/nextjs/app/builders/page.tsx

@@ -1,32 +1,21 @@
-"use client";
-
 import React from "react";
 import MembersList from "./_components/MembersList";
-import { AiOutlineLoading3Quarters } from "react-icons/ai";
-import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+import fs from "fs/promises";
+import path from "path";
+
+// Getting teh buildres dir. data
+const getBuildersData = async () => {
+  const buildersDirectory = path.join(process.cwd(), "/app/builders");
+  const builderFiles = await fs.readdir(buildersDirectory);
+  return builderFiles.filter(file => file !== "page.tsx").map(file => file.replace(".tsx", ""));
+};
 
-const BuildersPage = () => {
-  const { data: checkedInnBuilders, isLoading: loading } = useScaffoldReadContract({
-    contractName: "BatchRegistry",
-    functionName: "checkedInCounter",
-  });
+const BuildersPage = async () => {
+  const builders = await getBuildersData();
   return (
     <div className=" flex flex-col justify-center items-center md:my-20">
       <p className=" text-[22px] font-medium underline">🏰 The Builders 🏗️ of BuidlGuidl: Batch #8 </p>
-      <div className=" flex items-center gap-x-2 md:mb-8 mb-5 ">
-        <p className=" text-lg font-normal text-[25px]">Builders : </p>
-        <p className=" text-lg font-bold text-[24px]">
-          {loading ? (
-            <div className=" animate-spin text-lg">
-              <AiOutlineLoading3Quarters />
-            </div>
-          ) : (
-            checkedInnBuilders?.toString()
-          )}
-        </p>
-      </div>
-
-      <MembersList />
+      <MembersList builders={builders} />
     </div>
   );
 };