Tweak completed grants page (#43)

BuidlGuidl · Feb 26, 2024 · cafca3a · cafca3a
1 parent 73989ce
commit cafca3a
Showing 1 changed file with 23 additions and 18 deletions.
diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -1,17 +1,28 @@
 import Image from "next/image";
+import { Address } from "~~/components/scaffold-eth";
 import { getAllCompletedGrants } from "~~/services/database/grants";
 import { GrantData } from "~~/services/database/schema";
 
-const CompletedGrantCard = ({ title, description, askAmount }: GrantData) => {
+const CompletedGrantCard = ({ title, description, askAmount, builder, link }: GrantData) => {
   return (
-    <div className="w-72 md:w-80 bg-base-200 min-h-full rounded-2xl overflow-hidden shadow-lg p-4 space-y-4">
-      <div className="h-44 w-full bg-secondary rounded-2xl relative">
-        <div className="badge bg-base-200 absolute top-4 right-4 ">Learn more</div>
+    <div className="w-72 md:w-[300px] bg-primary min-h-full rounded-2xl overflow-hidden shadow-lg p-4 space-y-4">
+      <div className="h-44 w-full bg-secondary rounded-xl relative">
+        <a
+          href={link}
+          className="badge bg-base-200 absolute top-4 right-4 rounded-2xl py-3 px-3 hover:opacity-80"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Learn more
+        </a>
         <p className="m-0 absolute bottom-4 left-4 text-lg">{title}</p>
       </div>
-      <div className="space-y-2">
-        <p className="text-base m-0">{description}</p>
-        <p className="text-base font-medium m-0">Amounted Granted: {askAmount} ETH</p>
+      <div className="flex flex-col gap-2 px-3">
+        <Address address={builder} />
+        <p className="text-base m-0 mt-2">
+          <span className="font-medium">{askAmount} ETH</span>
+        </p>
+        <p className="text-base m-0 line-clamp-3">{description}</p>
       </div>
     </div>
   );
@@ -20,19 +31,13 @@ export const CompletedGrants = async () => {
   const completedGrants = await getAllCompletedGrants();
 
   return (
-    <div className="bg-primary">
-      <div className="container flex flex-col justify-center max-w-[90%] lg:max-w-7xl mx-auto py-12 lg:px-4 gap-4">
-        <div className="self-center md:self-start w-fit relative">
+    <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 invert"
-            src="/assets/sparkle.png"
-            alt="sparkle"
-            width={32}
-            height={32}
-          />
+          <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 md:flex-row gap-10">
+        <div className="flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6">
           {completedGrants.map(grant => (
             <CompletedGrantCard key={grant.id} {...grant} />
           ))}