From ad31993532b012a89d44513cb28a5afc377b1118 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf <122315398+dominik-stumpf@users.noreply.github.com> Date: Mon, 26 Aug 2024 12:35:56 +0200 Subject: [PATCH] add join profile action card (#1451) * feat: add join profile action card * feat: add mountain icon and restrict card popup * chore: prevent pointer event overlay --- .../(marketing)/profile/[username]/page.tsx | 2 + .../profile/_components/JoinProfileAction.tsx | 45 +++++++++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 src/app/(marketing)/profile/_components/JoinProfileAction.tsx diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx index c73bc6c504..ba9a7de4f7 100644 --- a/src/app/(marketing)/profile/[username]/page.tsx +++ b/src/app/(marketing)/profile/[username]/page.tsx @@ -13,6 +13,7 @@ import { ArrowRight } from "@phosphor-icons/react/dist/ssr" import { env } from "env" import Image from "next/image" import { notFound, redirect } from "next/navigation" +import { JoinProfileAction } from "../_components/JoinProfileAction" import { Profile } from "../_components/Profile" import { ProfileColorBanner } from "../_components/ProfileColorBanner" import { ProfileHero } from "../_components/ProfileHero" @@ -146,6 +147,7 @@ const Page = async ({ params: { username } }: { params: { username: string } })

+ ) } diff --git a/src/app/(marketing)/profile/_components/JoinProfileAction.tsx b/src/app/(marketing)/profile/_components/JoinProfileAction.tsx new file mode 100644 index 0000000000..d2f304486d --- /dev/null +++ b/src/app/(marketing)/profile/_components/JoinProfileAction.tsx @@ -0,0 +1,45 @@ +"use client" + +import { Anchor } from "@/components/ui/Anchor" +import { Card } from "@/components/ui/Card" +import { REFERRER_USER_SEARCH_PARAM_KEY } from "@app/(marketing)/create-profile/(onboarding)/constants" +import { ArrowRight, Mountains } from "@phosphor-icons/react" +import useUser from "components/[guild]/hooks/useUser" +import { useProfile } from "../_hooks/useProfile" + +export const JoinProfileAction = () => { + const profile = useProfile() + const user = useUser() + if (!profile.data || user.guildProfile) { + return + } + return ( +
+ + +
+ +
+
+ Join{" "} + + {profile.data.name || profile.data.username} + {" "} + on their adventure + +
+
+
+
+ ) +}