From 41759c01aeff42a7f5739b17a45953f9ba986bb0 Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Mon, 21 Jul 2025 16:40:32 +0530 Subject: [PATCH] feat(web): Add past sponsors section with toggle visibility --- .../(home)/_components/sponsors-section.tsx | 330 +++++++++++++----- 1 file changed, 241 insertions(+), 89 deletions(-) diff --git a/apps/web/src/app/(home)/_components/sponsors-section.tsx b/apps/web/src/app/(home)/_components/sponsors-section.tsx index c8630b9..bd0acf1 100644 --- a/apps/web/src/app/(home)/_components/sponsors-section.tsx +++ b/apps/web/src/app/(home)/_components/sponsors-section.tsx @@ -1,4 +1,11 @@ -import { Github, Globe, Heart, Terminal } from "lucide-react"; +import { + ChevronDown, + ChevronUp, + Github, + Globe, + Heart, + Terminal, +} from "lucide-react"; import Image from "next/image"; import { useEffect, useState } from "react"; import type { Sponsor } from "@/lib/types"; @@ -7,6 +14,7 @@ export default function SponsorsSection() { const [sponsors, setSponsors] = useState([]); const [loadingSponsors, setLoadingSponsors] = useState(true); const [sponsorError, setSponsorError] = useState(null); + const [showPastSponsors, setShowPastSponsors] = useState(false); useEffect(() => { fetch("https://sponsors.amanv.dev/sponsors.json") @@ -31,6 +39,15 @@ export default function SponsorsSection() { return 0; }; + if (a.monthlyDollars === -1 && b.monthlyDollars !== -1) return 1; + if (a.monthlyDollars !== -1 && b.monthlyDollars === -1) return -1; + + if (a.monthlyDollars === -1 && b.monthlyDollars === -1) { + return ( + new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() + ); + } + const aIsMonthly = !a.isOneTime; const bIsMonthly = !b.isOneTime; @@ -49,6 +66,13 @@ export default function SponsorsSection() { }); }, []); + const currentSponsors = sponsors.filter( + (sponsor) => sponsor.monthlyDollars !== -1, + ); + const pastSponsors = sponsors.filter( + (sponsor) => sponsor.monthlyDollars === -1, + ); + return (
@@ -124,99 +148,227 @@ export default function SponsorsSection() {
) : ( -
-
- {sponsors.map((entry, index) => { - const since = new Date(entry.createdAt).toLocaleDateString( - undefined, - { year: "numeric", month: "short" }, - ); - return ( -
-
-
- ▶ -
- {entry.isOneTime ? "ONE-TIME" : "MONTHLY"} - • - SINCE {since.toUpperCase()} -
-
-
-
-
-
- {entry.sponsor.name -
-
-
-

- {entry.sponsor.name || entry.sponsor.login} -

- {entry.tierName && ( -

- {entry.tierName} -

- )} -
-
- - - - {entry.sponsor.login} +
+ {currentSponsors.length > 0 && ( +
+
+ ▶ + + ACTIVE_SPONSORS.EXE + + + ({currentSponsors.length}) + +
+
+ {currentSponsors.map((entry, index) => { + const since = new Date(entry.createdAt).toLocaleDateString( + undefined, + { year: "numeric", month: "short" }, + ); + return ( +
+
+
+ ▶ +
+ + {entry.isOneTime ? "ONE-TIME" : "MONTHLY"} - - {(entry.sponsor.websiteUrl || - entry.sponsor.linkUrl) && ( - - - - {( - entry.sponsor.websiteUrl || - entry.sponsor.linkUrl - ) - ?.replace(/^https?:\/\//, "") - ?.replace(/\/$/, "")} - - - )} - - {/*
- 👤 - {entry.sponsor.type.toUpperCase()} -
*/} + • + SINCE {since.toUpperCase()} +
+
+
+
+
+
+ {entry.sponsor.name +
+
+
+

+ {entry.sponsor.name || entry.sponsor.login} +

+ {entry.tierName && ( +

+ {entry.tierName} +

+ )} +
+ +
-
+ ); + })} +
+
+ )} + + {pastSponsors.length > 0 && ( +
+ + + {showPastSponsors && ( +
+ {pastSponsors.map((entry, index) => { + const since = new Date(entry.createdAt).toLocaleDateString( + undefined, + { year: "numeric", month: "short" }, + ); + return ( +
+
+
+ + ◆ + +
+ PAST + • + SINCE {since.toUpperCase()} +
+
+
+
+
+
+ {entry.sponsor.name +
+
+
+

+ {entry.sponsor.name || entry.sponsor.login} +

+ {entry.tierName && ( +

+ {entry.tierName} +

+ )} +
+ +
+
+
+
+ ); + })}
- ); - })} -
+ )} +
+ )}