List the members of the batch

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

@@ -0,0 +1,157 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import { RiShareBoxLine } from "react-icons/ri";
+import { Address } from "~~/components/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",
+  });
+
+  // Getting the list of builders' address list who have completed their check-in.
+  const { data: MembersList } = useScaffoldEventHistory({
+    contractName: "BatchRegistry",
+    eventName: "CheckedIn",
+    blockData: true,
+    fromBlock: 123753708n - 123506774n,
+    transactionData: true,
+    receiptData: true,
+  });
+
+  // Separating builders into those with and without a profile page.
+  const buildersWithProfile =
+    MembersList?.filter(member => {
+      const address = member?.args?.builder;
+      return address && builders.includes(address);
+    }) || [];
+
+  const buildersWithoutProfile =
+    MembersList?.filter(member => {
+      const address = member?.args?.builder;
+      return address && !builders.includes(address);
+    }) || [];
+
+  // Counting the number of builders with a profile page.
+  const profileBuildersCount = buildersWithProfile.length;
+
+  return (
+    <>
+      <div className=" flex justify-center items-center md:gap-x-10 relative">
+        <div className="flex items-center gap-x-2 md:mb-8 mb-5">
+          <p className="text-lg font-normal text-[25px] underline">Builders:</p>
+          <p className="text-lg font-bold text-[24px]">
+            {loading ? (
+              <div className="animate-spin text-lg">
+                <AiOutlineLoading3Quarters />
+              </div>
+            ) : (
+              checkedInnBuilders?.toString()
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-x-2 md:mb-8 mb-5">
+          <p className="text-lg font-normal text-[25px] underline">Builders pages created:</p>
+          <p className="text-lg font-bold text-[24px]">
+            {loading ? (
+              <div className="animate-spin text-lg">
+                <AiOutlineLoading3Quarters />
+              </div>
+            ) : (
+              profileBuildersCount?.toString()
+            )}
+          </p>
+        </div>
+      </div>
+      <div className=" absolute top-[400px]">
+        {!MembersList && (
+          <div className="animate-spin text-lg">
+            <AiOutlineLoading3Quarters />
+          </div>
+        )}
+      </div>
+      <div className="md:mx-[200px] overflow-x-auto w-full flex justify-center items-center">
+        <table className="w-full sm:w-[80%] lg:w-[50%] border border-black dark:border-gray-300 rounded-lg">
+          <thead>
+            <tr>
+              <th className="px-8 py-2 sm:px-10 sm:py-3 text-center dark:text-white font-semibold border-l border-black dark:border-gray-300 rounded-tl-lg">
+                Addresses
+              </th>
+              <th className="px-8 py-2 sm:px-10 sm:py-3 text-center dark:text-white font-semibold border-r border-black dark:border-gray-300 rounded-tr-lg">
+                Profile Links
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {/* Render builders with profile pages first */}
+            {buildersWithProfile.map((member, i) => {
+              const address = member?.args?.builder;
+              return (
+                <tr
+                  key={i}
+                  className={
+                    i % 2 === 0
+                      ? "bg-primary border border-black dark:border-gray-300"
+                      : "bg-[#323f61] border border-black dark:border-gray-300 py-3"
+                  }
+                >
+                  <td className="px-8 py-2 sm:px-10 sm:py-4 text-center align-middle">
+                    <div className="flex justify-center items-center py-1 sm:py-2 text-black rounded-lg">
+                      <div className="bg-white px-3 py-2 rounded-lg">
+                        <Address address={address} />
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-8 py-2 sm:px-10 sm:py-4 text-center align-middle">
+                    <Link
+                      href={`/builders/${address}`}
+                      className="text-blue-500 underline flex justify-center items-center font-semibold"
+                    >
+                      View Profile
+                      <div>
+                        <RiShareBoxLine className="text-lg text-gray-400 opacity-45" />
+                      </div>
+                    </Link>
+                  </td>
+                </tr>
+              );
+            })}
+            {/* Render builders without profile pages */}
+            {buildersWithoutProfile.map((member, i) => {
+              const address = member?.args?.builder;
+              return (
+                <tr
+                  key={i + buildersWithProfile.length}
+                  className={
+                    i % 2 === 0
+                      ? "bg-primary border border-black dark:border-gray-300"
+                      : "bg-[#323f61] border border-black dark:border-gray-300 py-3"
+                  }
+                >
+                  <td className="px-8 py-2 sm:px-10 sm:py-4 text-center align-middle">
+                    <div className="flex justify-center items-center py-1 sm:py-2 text-black rounded-lg">
+                      <div className="bg-white px-3 py-2 rounded-lg">
+                        <Address address={address} />
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-8 py-2 sm:px-10 sm:py-4 text-center align-middle">
+                    <span className="text-red-500 font-semibold">No Profile Page</span>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};
+
+export default MembersList;

packages/nextjs/app/builders/page.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import MembersList from "./_components/MembersList";
+import fs from "fs/promises";
+import path from "path";
+
+// Getting the 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 = 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>
+      <MembersList builders={builders} />
+    </div>
+  );
+};
+
+export default BuildersPage;

packages/nextjs/components/Header.tsx

@@ -19,6 +19,10 @@ export const menuLinks: HeaderMenuLink[] = [
     label: "Home",
     href: "/",
   },
+  {
+    label: "Builders",
+    href: "/builders",
+  },
   {
     label: "Debug Contracts",
     href: "/debug",