Reduced view for completed grants at Homepage + completed-grants page…

… for full view
BuidlGuidl · Mar 1, 2024 · bb6dc6f · bb6dc6f
2 parents 6fea693 + 48320f5
commit bb6dc6f
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 5 deletions.
diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -32,8 +32,10 @@ const CompletedGrantCard = ({ title, description, askAmount, builder, link, comp
     </div>
   );
 };
-export const CompletedGrants = async () => {
+
+export const CompletedGrants = async ({ reducedView = false }) => {
   const completedGrants = await getAllCompletedGrants();
+  const grantsToShow = reducedView ? completedGrants.slice(0, 8) : completedGrants;
 
   return (
     <div className="bg-base-100">
@@ -42,11 +44,22 @@ export const CompletedGrants = async () => {
           <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="flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6">
-          {completedGrants.map(grant => (
+        <div
+          className={`${
+            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>
+        {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})
+            </a>
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/packages/nextjs/app/completed-grants/page.tsx 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
@@ -12,7 +12,7 @@ const Home = () => {
       <GrantsStats />
       <EcosystemGrants />
       <CommunityGrant />
-      <CompletedGrants />
+      <CompletedGrants reducedView={true} />
       <ActiveGrants />
     </>
   );

diff --git 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-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-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-rwd > :nth-child(n + 7) {
+    display: none;
+  }
+}
diff --git 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%",