Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tweak completed grants page #43

Merged
merged 7 commits into from
Feb 26, 2024
Merged

Tweak completed grants page #43

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
307e9a5
flex wrap + line-clamp and minor tweaks
technophile-04 Feb 26, 2024
51a656e
update colors inline with figma
technophile-04 Feb 26, 2024
69bca90
add builder address to card ad move Amount eth up
technophile-04 Feb 26, 2024
1ee002a
decrease gap and increase cards width
technophile-04 Feb 26, 2024
483d3f2
Card tweaks
carletex Feb 26, 2024
728a897
Merge branch 'main' into tweaks/completed-grants
carletex Feb 26, 2024
996af24
Add link to card
carletex Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 23 additions & 18 deletions packages/nextjs/app/_components/CompletedGrants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
Expand All @@ -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} />
))}
Expand Down
Loading