From 313ed48e41c5d9a5746c40a6f2e10dae02bcb12a Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 11:15:10 +0100
Subject: [PATCH 1/6] Add parameter to load full grants or reduced view (max-8)

---
 .../app/_components/CompletedGrants.tsx       | 29 ++++++++++++++-----
 packages/nextjs/tailwind.config.js            |  2 +-
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index c961fe8..cf9ed5b 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -32,21 +32,36 @@ const CompletedGrantCard = ({ title, description, askAmount, builder, link, comp
     </div>
   );
 };
-export const CompletedGrants = async () => {
+
+export const CompletedGrants = async ({ view = "full" }) => {
   const completedGrants = await getAllCompletedGrants();
+  const grantsToShow = view === "reduced" ? completedGrants.slice(0, 8) : completedGrants;
 
   return (
     <div className="bg-base-100">
-      <div className="container flex flex-col justify-center max-w-[95%] lg:max-w-7xl mx-auto py-12 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">Completed grants</h2>
-          <Image className="absolute -top-3 -right-7" src="/assets/sparkle.png" alt="sparkle" width={32} height={32} />
+      <div className="container max-w-[95%] lg:max-w-7xl mx-auto py-12 px-4 lg:px-0">
+        <div className="flex flex-col items-center lg:items-start">
+          <div className="text-4xl lg:text-6xl font-ppEditorial mb-6 text-center lg:text-left">
+            Completed grants
+            <Image src="/assets/sparkle.png" alt="sparkle" width={32} height={32} className="inline-block ml-4" />
+          </div>
         </div>
-        <div className="flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6">
-          {completedGrants.map(grant => (
+        <div
+          className={`${
+            view === "reduced" ? "grant-container" : ""
+          } flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6`}
+        >
+          {grantsToShow.map(grant => (
             <CompletedGrantCard key={grant.id} {...grant} />
           ))}
         </div>
+        {view === "reduced" && (
+          <div className="link w-full text-center mt-8 text-lg lg:text-xl">
+            <a href="/completed-grants" className="">
+              See all completed grants ({completedGrants.length})
+            </a>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index ac22557..e62eb35 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -29,7 +29,7 @@ module.exports = {
             "--tooltip-tail": "6px",
           },
           ".link": {
-            textUnderlineOffset: "2px",
+            textUnderlineOffset: "6px",
           },
           ".link:hover": {
             opacity: "80%",

From 350f874a92054f55c4a906573914f0431587a0eb Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 11:17:14 +0100
Subject: [PATCH 2/6] New page for all completed cards and load reduced on home

---
 packages/nextjs/app/completed-grants/page.tsx | 8 ++++++++
 packages/nextjs/app/page.tsx                  | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 packages/nextjs/app/completed-grants/page.tsx

diff --git a/packages/nextjs/app/completed-grants/page.tsx b/packages/nextjs/app/completed-grants/page.tsx
new file mode 100644
index 0000000..79ca808
--- /dev/null
+++ b/packages/nextjs/app/completed-grants/page.tsx
@@ -0,0 +1,8 @@
+import { CompletedGrants } from "../_components/CompletedGrants";
+import { NextPage } from "next";
+
+const SubmitGrant: NextPage = () => {
+  return <CompletedGrants />;
+};
+
+export default SubmitGrant;
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 9835252..936e65d 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -12,7 +12,7 @@ const Home = () => {
       <GrantsStats />
       <EcosystemGrants />
       <CommunityGrant />
-      <CompletedGrants />
+      <CompletedGrants view="reduced" />
       <ActiveGrants />
     </>
   );

From 6ec7e46c44611de5d33892967bf28bf6f2f290aa Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 11:18:26 +0100
Subject: [PATCH 3/6] Manually force to show only 2 rows of cards on every rwd
 breakdown

---
 packages/nextjs/styles/globals.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
index 3fb55ae..3754910 100644
--- a/packages/nextjs/styles/globals.css
+++ b/packages/nextjs/styles/globals.css
@@ -30,3 +30,24 @@ p {
 .btn.btn-ghost {
   @apply shadow-none;
 }
+
+/* Hide elements past the 3rd on screens smaller than 768px */
+@media (max-width: 767px) {
+  .grant-container > :nth-child(n + 4) {
+    display: none;
+  }
+}
+
+/* Hide elements past the 4th on screens between 768px and 1024px */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .grant-container > :nth-child(n + 5) {
+    display: none;
+  }
+}
+
+/* Hide elements past the 6th on screens between 1024px and 1284px */
+@media (min-width: 1024px) and (max-width: 1284px) {
+  .grant-container > :nth-child(n + 7) {
+    display: none;
+  }
+}

From 407fd8e70219e1021c0ddfb0ce35aa4ec57e52a2 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 13:25:50 +0100
Subject: [PATCH 4/6] Fix completed grants section title

---
 packages/nextjs/app/_components/CompletedGrants.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index cf9ed5b..b4ca445 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -39,12 +39,10 @@ export const CompletedGrants = async ({ view = "full" }) => {
 
   return (
     <div className="bg-base-100">
-      <div className="container max-w-[95%] lg:max-w-7xl mx-auto py-12 px-4 lg:px-0">
-        <div className="flex flex-col items-center lg:items-start">
-          <div className="text-4xl lg:text-6xl font-ppEditorial mb-6 text-center lg:text-left">
-            Completed grants
-            <Image src="/assets/sparkle.png" alt="sparkle" width={32} height={32} className="inline-block ml-4" />
-          </div>
+      <div className="container flex flex-col justify-center max-w-[95%] lg:max-w-7xl mx-auto py-12 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">Completed grants</h2>
+          <Image className="absolute -top-3 -right-7" src="/assets/sparkle.png" alt="sparkle" width={32} height={32} />
         </div>
         <div
           className={`${

From 0ee0251594468b6f403da6039d58a8fc50bd5a01 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 13:33:09 +0100
Subject: [PATCH 5/6] More intuitive classname

---
 packages/nextjs/app/_components/CompletedGrants.tsx | 2 +-
 packages/nextjs/styles/globals.css                  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index b4ca445..aeb8084 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -46,7 +46,7 @@ export const CompletedGrants = async ({ view = "full" }) => {
         </div>
         <div
           className={`${
-            view === "reduced" ? "grant-container" : ""
+            view === "reduced" ? "grant-container-rwd" : ""
           } flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6`}
         >
           {grantsToShow.map(grant => (
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
index 3754910..5d9e736 100644
--- a/packages/nextjs/styles/globals.css
+++ b/packages/nextjs/styles/globals.css
@@ -33,21 +33,21 @@ p {
 
 /* Hide elements past the 3rd on screens smaller than 768px */
 @media (max-width: 767px) {
-  .grant-container > :nth-child(n + 4) {
+  .grant-container-rwd > :nth-child(n + 4) {
     display: none;
   }
 }
 
 /* Hide elements past the 4th on screens between 768px and 1024px */
 @media (min-width: 768px) and (max-width: 1023px) {
-  .grant-container > :nth-child(n + 5) {
+  .grant-container-rwd > :nth-child(n + 5) {
     display: none;
   }
 }
 
 /* Hide elements past the 6th on screens between 1024px and 1284px */
 @media (min-width: 1024px) and (max-width: 1284px) {
-  .grant-container > :nth-child(n + 7) {
+  .grant-container-rwd > :nth-child(n + 7) {
     display: none;
   }
 }

From 48320f5e1e8cd2e4e0a8e97911690e8a8385a5e0 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 22:58:25 +0100
Subject: [PATCH 6/6] Change view mode prop as string for a boolean

---
 packages/nextjs/app/_components/CompletedGrants.tsx | 8 ++++----
 packages/nextjs/app/page.tsx                        | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index aeb8084..e13bfd2 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -33,9 +33,9 @@ const CompletedGrantCard = ({ title, description, askAmount, builder, link, comp
   );
 };
 
-export const CompletedGrants = async ({ view = "full" }) => {
+export const CompletedGrants = async ({ reducedView = false }) => {
   const completedGrants = await getAllCompletedGrants();
-  const grantsToShow = view === "reduced" ? completedGrants.slice(0, 8) : completedGrants;
+  const grantsToShow = reducedView ? completedGrants.slice(0, 8) : completedGrants;
 
   return (
     <div className="bg-base-100">
@@ -46,14 +46,14 @@ export const CompletedGrants = async ({ view = "full" }) => {
         </div>
         <div
           className={`${
-            view === "reduced" ? "grant-container-rwd" : ""
+            reducedView ? "grant-container-rwd" : ""
           } flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6`}
         >
           {grantsToShow.map(grant => (
             <CompletedGrantCard key={grant.id} {...grant} />
           ))}
         </div>
-        {view === "reduced" && (
+        {reducedView && (
           <div className="link w-full text-center mt-8 text-lg lg:text-xl">
             <a href="/completed-grants" className="">
               See all completed grants ({completedGrants.length})
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 936e65d..4d45e5d 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -12,7 +12,7 @@ const Home = () => {
       <GrantsStats />
       <EcosystemGrants />
       <CommunityGrant />
-      <CompletedGrants view="reduced" />
+      <CompletedGrants reducedView={true} />
       <ActiveGrants />
     </>
   );