From 0749756112b41a3ada0b1431bb88feb0f14eb76d Mon Sep 17 00:00:00 2001 From: haydencleary <5160414+haydencleary@users.noreply.github.com> Date: Wed, 5 Mar 2025 11:54:26 +0100 Subject: [PATCH 1/2] Add ODQuest banner to discover page with ListBanner component --- app/(saas)/discover/v2.tsx | 31 +++++++++++++++++-- shared/features/list-banner/list-banner.tsx | 20 +++++++++--- .../features/list-banner/list-banner.types.ts | 9 ++++-- 3 files changed, 50 insertions(+), 10 deletions(-) diff --git a/app/(saas)/discover/v2.tsx b/app/(saas)/discover/v2.tsx index 3321999f3..4e6df7906 100644 --- a/app/(saas)/discover/v2.tsx +++ b/app/(saas)/discover/v2.tsx @@ -1,8 +1,12 @@ +import { Target } from "lucide-react"; +import Link from "next/link"; + +import { NEXT_ROUTER } from "@/shared/constants/router"; +import { ListBanner } from "@/shared/features/list-banner/list-banner"; import { NavigationBreadcrumb } from "@/shared/features/navigation/navigation.context"; import { PageContainer } from "@/shared/features/page/page-container/page-container"; import { PageInner } from "@/shared/features/page/page-inner/page-inner"; -import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card"; -import { TypographyP } from "@/shared/ui/typography"; +import { Button } from "@/shared/ui/button"; import { IssueCard } from "./_components/issue-card/issue-card"; import { NewProjectCard } from "./_components/new-project-card/new-project-card"; @@ -57,6 +61,28 @@ export default function DiscoverPageV2() { /> ))} + + + Embark on an ODQuest Adventure + + ), + }} + subtitle={{ + children: "Unlock epic rewards by conquering challenges and join a thriving community of adventurers on an exciting Quest!", + }} + logo={} + classNames={{ + base: "bg-gradient-to-br from-indigo-900 to-transparent to-80%", + }} + > + + + + -
- - +
+
+ + +
+ + {children ?
{children}
: null}
; subtitle: TypoPort<"p">; logo?: ReactNode; -}; + classNames?: { + base?: string; + }; +} From 0b13015ac98552a04fe16c893744b107df023f65 Mon Sep 17 00:00:00 2001 From: haydencleary <5160414+haydencleary@users.noreply.github.com> Date: Wed, 5 Mar 2025 12:01:51 +0100 Subject: [PATCH 2/2] Refactor discover page banner to dynamically render live hackathon --- .../_components/page-banner/page-banner.tsx | 58 +++++++++++++++++++ .../_features/page-header/page-header.tsx | 2 +- app/(saas)/discover/v2.tsx | 27 +-------- 3 files changed, 61 insertions(+), 26 deletions(-) create mode 100644 app/(saas)/discover/_components/page-banner/page-banner.tsx diff --git a/app/(saas)/discover/_components/page-banner/page-banner.tsx b/app/(saas)/discover/_components/page-banner/page-banner.tsx new file mode 100644 index 000000000..f6cf78ac9 --- /dev/null +++ b/app/(saas)/discover/_components/page-banner/page-banner.tsx @@ -0,0 +1,58 @@ +import { Target } from "lucide-react"; +import Link from "next/link"; +import { useCallback } from "react"; + +import { LiveHackathonCard } from "@/app/(saas)/osw/_components/live-hackathon-card/live-hackathon-card"; + +import { HackathonReactQueryAdapter } from "@/core/application/react-query-adapter/hackathon"; + +import { ErrorState } from "@/shared/components/error-state/error-state"; +import { NEXT_ROUTER } from "@/shared/constants/router"; +import { ListBanner } from "@/shared/features/list-banner/list-banner"; +import { Button } from "@/shared/ui/button"; +import { Skeleton } from "@/shared/ui/skeleton"; + +export function PageBanner() { + const { data, isLoading, isError } = HackathonReactQueryAdapter.client.useGetHackathons({}); + + const renderLiveHackathon = useCallback(() => { + if (isLoading) { + return ; + } + + if (isError) return ; + + if (!data) + return ( + + Embark on an ODQuest Adventure + + ), + }} + subtitle={{ + children: + "Unlock epic rewards by conquering challenges and join a thriving community of adventurers on an exciting Quest!", + }} + logo={} + classNames={{ + base: "bg-gradient-to-br from-indigo-900 to-transparent to-80%", + }} + > + + + ); + + const liveHackathon = data.hackathons.find(hackathon => hackathon.isLive()); + + if (!liveHackathon) return null; + + return ; + }, [data, isError, isLoading]); + + return renderLiveHackathon(); +} diff --git a/app/(saas)/discover/_features/page-header/page-header.tsx b/app/(saas)/discover/_features/page-header/page-header.tsx index 52ef08c59..a3aa74755 100644 --- a/app/(saas)/discover/_features/page-header/page-header.tsx +++ b/app/(saas)/discover/_features/page-header/page-header.tsx @@ -11,7 +11,7 @@ export function PageHeader() {
diff --git a/app/(saas)/discover/v2.tsx b/app/(saas)/discover/v2.tsx index 4e6df7906..b0c342c79 100644 --- a/app/(saas)/discover/v2.tsx +++ b/app/(saas)/discover/v2.tsx @@ -1,12 +1,8 @@ -import { Target } from "lucide-react"; -import Link from "next/link"; +import { PageBanner } from "@/app/(saas)/discover/_components/page-banner/page-banner"; -import { NEXT_ROUTER } from "@/shared/constants/router"; -import { ListBanner } from "@/shared/features/list-banner/list-banner"; import { NavigationBreadcrumb } from "@/shared/features/navigation/navigation.context"; import { PageContainer } from "@/shared/features/page/page-container/page-container"; import { PageInner } from "@/shared/features/page/page-inner/page-inner"; -import { Button } from "@/shared/ui/button"; import { IssueCard } from "./_components/issue-card/issue-card"; import { NewProjectCard } from "./_components/new-project-card/new-project-card"; @@ -62,26 +58,7 @@ export default function DiscoverPageV2() { ))} - - Embark on an ODQuest Adventure - - ), - }} - subtitle={{ - children: "Unlock epic rewards by conquering challenges and join a thriving community of adventurers on an exciting Quest!", - }} - logo={} - classNames={{ - base: "bg-gradient-to-br from-indigo-900 to-transparent to-80%", - }} - > - - +