diff --git a/packages/common/src/icons/Discord.tsx b/packages/common/src/icons/Discord.tsx index ac73e940e2..bfbc4d7e31 100644 --- a/packages/common/src/icons/Discord.tsx +++ b/packages/common/src/icons/Discord.tsx @@ -7,7 +7,7 @@ function Discord() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + - + diff --git a/packages/grant-explorer/src/features/collections/CollectionCard.tsx b/packages/grant-explorer/src/features/collections/CollectionCard.tsx index 89addd5076..5d31887c9e 100644 --- a/packages/grant-explorer/src/features/collections/CollectionCard.tsx +++ b/packages/grant-explorer/src/features/collections/CollectionCard.tsx @@ -1,37 +1,38 @@ -import { Collection } from "data-layer"; +import { CommunityCollection } from "./community"; import { Link } from "react-router-dom"; import { Badge, BasicCard, CardHeader } from "../common/styles"; import { CollectionBanner } from "../discovery/CardBanner"; +import { collectionPath } from "common/src/routes/explorer"; export type CollectionCardProps = { - collection: Collection; + collection: CommunityCollection; size: "big" | "small"; }; const CollectionCard = ({ collection, size }: CollectionCardProps) => { - const { id, author, name, applicationRefs, images } = collection; + const { cid, author, name, numberOfProjects } = collection; return ( - - +
{name}
- {applicationRefs.length} projects + {numberOfProjects} projects
by {author}
- + ); }; diff --git a/packages/grant-explorer/src/features/collections/CollectionsGrid.tsx b/packages/grant-explorer/src/features/collections/CollectionsGrid.tsx index 69a332a7b7..bd19f6acbf 100644 --- a/packages/grant-explorer/src/features/collections/CollectionsGrid.tsx +++ b/packages/grant-explorer/src/features/collections/CollectionsGrid.tsx @@ -1,5 +1,5 @@ import { useMemo } from "react"; -import { Collection } from "data-layer"; +import { CommunityCollection } from "./community"; import CollectionCard from "./CollectionCard"; // Index position of the big cards @@ -7,7 +7,7 @@ const collectionGridLayout = [0, 5, 6, 11]; const DISPLAY_COUNT = 12; -export function CollectionsGrid({ data }: { data: Collection[] }) { +export function CollectionsGrid({ data }: { data: CommunityCollection[] }) { // Shuffle the collections const shuffled = useMemo(() => shuffle(data), [data]); @@ -17,7 +17,7 @@ export function CollectionsGrid({ data }: { data: Collection[] }) { const size = collectionGridLayout.includes(i) ? "big" : "small"; return (
diff --git a/packages/grant-explorer/src/features/collections/community/index.ts b/packages/grant-explorer/src/features/collections/community/index.ts new file mode 100644 index 0000000000..813e661ba8 --- /dev/null +++ b/packages/grant-explorer/src/features/collections/community/index.ts @@ -0,0 +1,60 @@ +export type CommunityCollection = { + cid: string; + author: string; + name: string; + numberOfProjects: number; + description: string; +}; + +const collections: CommunityCollection[] = [ + { + cid: "bafkreidobkgrbrw7mex556jnku4xlony6jvyhepc6yqpzzymasupnuvdi4", + author: "BitcoinLouie", + name: "Solo Staking", + numberOfProjects: 9, + description: + "This collection showcases BitcoinLouie's Solo Staking Collection", + }, + { + cid: "bafkreibp2yzwyj6m2fcgjqp7k6fikj3rr7ew3ceytrnr2zgi6dql2oiiry", + author: "Kevin Weaver", + name: "Regen Builders", + numberOfProjects: 20, + description: + "Kevin's bento assortment of public goods spanning apps, web3 infra, dev tools I use daily and climate initiatives that pair well.", + }, + { + cid: "bafkreifk3ejfp3j6eanuvvoqmp2bgyieuq67eh4kqpuxebegshaqaghu5e", + author: "ThankArb", + name: "Bring ARB Home ", + numberOfProjects: 22, + description: + "Think ARB is cool, but never felt like it would really work for you? Take a look at these rounds on Abriturum that you can use to impact your community close to home.", + }, + { + cid: "bafkreicneb6yinsk3zwcntohxklo3gcztosj5a2g72sr2dpqlawlcyvpli", + author: "buidlbox", + name: "buidl & shill sesh ", + numberOfProjects: 13, + description: + "We've rounded up all the projects from our recent buidl & shill spaces for #GG20 in a collection", + }, + { + cid: "bafkreihmuhsrdh62kjor5472dsgahhea3ltj33tffhr2cnc5bxae3qetou", + author: "Benjamin Life", + name: "Regen Civics", + numberOfProjects: 25, + description: + "Regen Civics is my curation of civic innovators in the @climate_program round on @gitcoin.", + }, + { + cid: "bafkreiffs6li5kwipwf6m4dgwbul3lf5mg766fujks72vm4crdebgybrme", + author: "Coleen Chase", + name: "Climate Projects Making Real-World Impact in Rural Africa", + numberOfProjects: 25, + description: + "Check out my collection of Climate Projects making real-world impact in rural Africa including 2 projects for dMRV.", + }, +]; + +export default collections; diff --git a/packages/grant-explorer/src/features/collections/hooks/useCollections.ts b/packages/grant-explorer/src/features/collections/hooks/useCollections.ts index 6ca8df6d66..33876949ab 100644 --- a/packages/grant-explorer/src/features/collections/hooks/useCollections.ts +++ b/packages/grant-explorer/src/features/collections/hooks/useCollections.ts @@ -1,33 +1,16 @@ import useSWR, { SWRResponse } from "swr"; -import { useDataLayer, Collection } from "data-layer"; +import { Collection } from "data-layer"; +import { useDataLayer } from "data-layer"; +import { CommunityCollection } from "../community"; import { CollectionV1, parseCollection } from "../collections"; import { getConfig } from "common/src/config"; +import communityCollections from "../community"; const config = getConfig(); -export const useCollections = (): SWRResponse => { - const dataLayer = useDataLayer(); - +export const useCollections = (): SWRResponse => { return useSWR(["collections"], async () => { - const collections = await dataLayer.getProjectCollections(); - return collections; - }); -}; - -export const useCollection = ( - id: string | null -): SWRResponse => { - const dataLayer = useDataLayer(); - return useSWR(id === null ? null : ["collections", id], async () => { - if (id === null) { - // The first argument to useSRW will ensure that this function never gets - // called if options is `null`. If it's still called, we fail early and - // clearly. - throw new Error("Bug"); - } - - const collection = await dataLayer.getProjectCollectionById(id); - return collection === null ? undefined : collection; + return communityCollections; }); }; diff --git a/packages/grant-explorer/src/features/discovery/CardBanner.tsx b/packages/grant-explorer/src/features/discovery/CardBanner.tsx index 4a40ed022b..348221710c 100644 --- a/packages/grant-explorer/src/features/discovery/CardBanner.tsx +++ b/packages/grant-explorer/src/features/discovery/CardBanner.tsx @@ -1,3 +1,4 @@ +import { useState } from "react"; import Stock1 from "../../assets/landing/stock1.jpg"; import Stock10 from "../../assets/landing/stock10.jpg"; import Stock11 from "../../assets/landing/stock11.jpg"; @@ -87,21 +88,40 @@ export function RoundBanner(props: { roundId: string }) { ); } -export function CollectionBanner({ images }: { images: string[] }) { +const gradients = [ + ["F68561", "FFD9CD"], + ["47A095", "ADEDE5"], + ["FFEFBE", "FBC624"], + ["D3EDFE", "15B8DC"], + ["FFD9CD", "5F94BC"], + ["FFD9CD", "ADEDE5"], + ["FFEFBE", "ADEDE5"], + ["DBF0DB", "5F94BC"], + ["FFE5F8", "FFEFBE"], + ["73E2E2", "FF9776"], + ["D9D6FF", "645AD8"], + ["B3DE9F", "DBF0DB"], + ["6935FF", "D3EDFE"], + ["FBC624", "FF7043"], + ["FF00B8", "FF9776"], + ["D3EDFE", "25BDCE"], + ["FF7043", "FFC2EE"], +]; + +function getRandomGradient() { + const r = Math.floor(Math.random() * gradients.length); + return gradients[r]; +} + +export function CollectionBanner() { + const [gradient] = useState(getRandomGradient()); return ( -
- {images.map((image, i) => { - return ( -
- ); - })} -
+
); } diff --git a/packages/grant-explorer/src/features/discovery/LandingPage.tsx b/packages/grant-explorer/src/features/discovery/LandingPage.tsx index 27fb89a041..6439f30411 100644 --- a/packages/grant-explorer/src/features/discovery/LandingPage.tsx +++ b/packages/grant-explorer/src/features/discovery/LandingPage.tsx @@ -15,6 +15,8 @@ import { RoundsGrid } from "./RoundsGrid"; import LandingHero from "./LandingHero"; import { LandingSection, ViewAllLink } from "./LandingSection"; import { toQueryString } from "./RoundsFilter"; +import { useCollections } from "../collections/hooks/useCollections"; +import { CollectionsGrid } from "../collections/CollectionsGrid"; const LandingPage = () => { const activeRounds = useFilterRounds( @@ -37,9 +39,18 @@ const LandingPage = () => { ); }, [roundsEndingSoon.data]); + const collections = useCollections(); + return ( + + + {collections.data !== undefined && ( + + )} + + - {tabs.map((tab) => { + {tabs.map((tab, i) => { const isActive = tab.activeRegExp.test(pathname); // Set the data-track-event attribute when the tab is active const tabProps = isActive ? { "data-track-event": tab.tabName } : {}; return (