diff --git a/app/components/play/GroupCard.tsx b/app/components/play/GroupCard.tsx index f6d6b7a6b..d5c1c96e0 100644 --- a/app/components/play/GroupCard.tsx +++ b/app/components/play/GroupCard.tsx @@ -1,6 +1,6 @@ import clsx from "clsx"; import { useFetcher } from "remix"; -import { Button } from "~/components/Button"; +import { Button, ButtonProps } from "~/components/Button"; import type { LookingActionSchema, LookingLoaderDataGroup, @@ -13,27 +13,36 @@ export function GroupCard({ type, ranked, lookingForMatch, + isOwnGroup = false, }: { group: LookingLoaderDataGroup; isCaptain?: boolean; type?: "LIKES_GIVEN" | "NEUTRAL" | "LIKES_RECEIVED"; ranked?: boolean; lookingForMatch: boolean; + isOwnGroup?: boolean; }) { const fetcher = useFetcher(); const buttonText = () => { + if (isOwnGroup) return "Stop looking"; if (type === "LIKES_GIVEN") return "Undo"; if (type === "NEUTRAL") return "Let's play?"; return lookingForMatch ? "Match up" : "Group up"; }; const buttonValue = (): LookingActionSchema["_action"] => { + if (isOwnGroup) return "LOOK_AGAIN"; if (type === "LIKES_GIVEN") return "UNLIKE"; if (type === "NEUTRAL") return "LIKE"; return lookingForMatch ? "MATCH_UP" : "UNITE_GROUPS"; }; + const buttonVariant = (): ButtonProps["variant"] => { + if (isOwnGroup) return "minimal-destructive"; + + return type === "LIKES_GIVEN" ? "destructive" : undefined; + }; return ( @@ -60,12 +69,16 @@ export function GroupCard({ )} {isCaptain && (