diff --git a/components/common/MyLink.tsx b/components/common/MyLink.tsx index fc5d39edc..578445d8d 100644 --- a/components/common/MyLink.tsx +++ b/components/common/MyLink.tsx @@ -5,15 +5,18 @@ import NextLink from "next/link"; interface Props { children: React.ReactNode; href: string; + isExternal?: boolean; } -const MyLink: React.FC = ({ children, href }) => { +const MyLink: React.FC = ({ children, href, isExternal }) => { const { themeColorShade } = useMyTheme(); + + if (isExternal) { + return {children}; + } return ( - - {children} - + {children} ); }; diff --git a/components/u/AvatarWithInfo.tsx b/components/u/AvatarWithInfo.tsx index 0d8f5caae..cc368f68f 100644 --- a/components/u/AvatarWithInfo.tsx +++ b/components/u/AvatarWithInfo.tsx @@ -8,22 +8,23 @@ import WeaponImage from "components/common/WeaponImage"; import { getEmojiFlag } from "countries-list"; import { getFullUsername } from "lib/strings"; import { useMyTheme } from "lib/useMyTheme"; +import useUser from "lib/useUser"; import { GetUserByIdentifierData } from "prisma/queries/getUserByIdentifier"; import { Fragment } from "react"; import { FaGamepad, FaTwitch, FaTwitter, FaYoutube } from "react-icons/fa"; +import { FiInfo } from "react-icons/fi"; interface AvatarWithInfoProps { user: NonNullable; peakXPowers: Partial>; } -// TODO: show text on how to get your top 500 linked - const AvatarWithInfo: React.FC = ({ user, peakXPowers, }) => { - const { gray } = useMyTheme(); + const [loggedInUser] = useUser(); + const { gray, themeColorShade } = useMyTheme(); function getSensString( motion: number | null | undefined, @@ -134,9 +135,10 @@ const AvatarWithInfo: React.FC = ({ )} {Object.keys(peakXPowers).length > 0 && ( - {(["SZ", "TC", "RM", "CB"] as RankedMode[]).map((mode, i) => ( - - {peakXPowers[mode] && ( + {(["SZ", "TC", "RM", "CB"] as RankedMode[]) + .filter((mode) => peakXPowers[mode]) + .map((mode, i) => ( + {i !== 0 && } {" "} @@ -144,9 +146,8 @@ const AvatarWithInfo: React.FC = ({ {peakXPowers[mode]} - )} - - ))} + + ))} )} {!!user.player?.switchAccountId && ( @@ -156,12 +157,32 @@ const AvatarWithInfo: React.FC = ({ )} + ); + + function Top500HelpText() { + if (Object.keys(peakXPowers).length > 0 || user.id !== loggedInUser?.id) + return null; + + return ( + + + + If you have finished a month in the Top 500 you can get your peak + ranks showing here. Simply{" "} + + DM Sendou + {" "} + with your in game name. + + + ); + } }; export default AvatarWithInfo;