Hide active grants section if empty

BuidlGuidl · Feb 27, 2024 · b09e145 · b09e145
1 parent 69e60ca
commit b09e145
Showing 1 changed file with 22 additions and 22 deletions.
diff --git 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>
   );
 };