From b09e145b7b1ccdacea7d8dc2e80faa3c7edfa61d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= <oceanrdn@gmail.com>
Date: Tue, 27 Feb 2024 17:32:50 +0100
Subject: [PATCH] Hide active grants section if empty

---
 .../nextjs/app/_components/ActiveGrants.tsx   | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/nextjs/app/_components/ActiveGrants.tsx b/packages/nextjs/app/_components/ActiveGrants.tsx
index 7f67789..83902f5 100644
--- a/packages/nextjs/app/_components/ActiveGrants.tsx
+++ b/packages/nextjs/app/_components/ActiveGrants.tsx
@@ -20,35 +20,35 @@ const ActiveGrantRow = ({ title, askAmount, builder, approvedAt }: GrantData) =>
 export const ActiveGrants = async () => {
   const activeGrants = await getAllActiveGrants();
 
+  if (!activeGrants.length) {
+    return null;
+  }
+
   return (
     <div className="container flex flex-col justify-center max-w-[90%] xl:max-w-7xl mx-auto py-16 gap-4">
       <div className="self-center lg:self-start w-fit relative">
         <h2 className="text-4xl lg:text-6xl text-center lg:text-left font-ppEditorial">WIP grants</h2>
         <Image className="absolute -top-3 -right-7" src="/assets/sparkle.png" alt="sparkle" width={32} height={32} />
       </div>
-      {activeGrants.length > 0 ? (
-        <div className="bg-base-100 rounded-3xl px-2 sm:px-6 pt-2 pb-6">
-          <div className="overflow-x-auto">
-            <table className="table">
-              <thead>
-                <tr className="border-b border-black text-black text-base">
-                  <th>Title</th>
-                  <th>Funding</th>
-                  <th>Builder</th>
-                  <th>Date</th>
-                </tr>
-              </thead>
-              <tbody className="">
-                {activeGrants.map(grant => (
-                  <ActiveGrantRow key={grant.id} {...grant} />
-                ))}
-              </tbody>
-            </table>
-          </div>
+      <div className="bg-base-100 rounded-3xl px-2 sm:px-6 pt-2 pb-6">
+        <div className="overflow-x-auto">
+          <table className="table">
+            <thead>
+              <tr className="border-b border-black text-black text-base">
+                <th>Title</th>
+                <th>Funding</th>
+                <th>Builder</th>
+                <th>Date</th>
+              </tr>
+            </thead>
+            <tbody className="">
+              {activeGrants.map(grant => (
+                <ActiveGrantRow key={grant.id} {...grant} />
+              ))}
+            </tbody>
+          </table>
         </div>
-      ) : (
-        <p>No active grants</p>
-      )}
+      </div>
     </div>
   );
 };