diff --git a/Frontend/src/app/components/badge/raw-json.tsx b/Frontend/src/app/components/badge/raw-json.tsx index 08da08b..dcf01bd 100644 --- a/Frontend/src/app/components/badge/raw-json.tsx +++ b/Frontend/src/app/components/badge/raw-json.tsx @@ -1,5 +1,6 @@ import { ReactElement } from "react"; import { Badge } from "@/components/ui/badge"; +import SimpleTooltip from "@/components/simple-tooltip"; /** * A badge for raw json. @@ -7,8 +8,10 @@ import { Badge } from "@/components/ui/badge"; * @returns the raw json badge jsx */ const RawJsonBadge = (): ReactElement => ( - - Raw Json - + + + Raw Json + + ); export default RawJsonBadge; diff --git a/Frontend/src/app/components/player/player-result.tsx b/Frontend/src/app/components/player/player-result.tsx index aff48d8..a15855d 100644 --- a/Frontend/src/app/components/player/player-result.tsx +++ b/Frontend/src/app/components/player/player-result.tsx @@ -12,6 +12,7 @@ import { ReactElement } from "react"; import { CachedPlayer, SkinPart } from "restfulmc-lib"; import CodeDialog from "@/components/code/code-dialog"; import RawJson from "@/components/badge/raw-json"; +import SimpleTooltip from "@/components/simple-tooltip"; /** * The props for a player result. @@ -85,7 +86,9 @@ const PlayerResult = ({ query, player }: PlayerResultProps): ReactElement => ( {/* Skin Parts */}
{/* Header */} -

Skin Parts

+

+ Skin Parts +

{/* Skin Parts */}
@@ -101,17 +104,18 @@ const PlayerResult = ({ query, player }: PlayerResultProps): ReactElement => ( [part, url]: [string, string], index: number ) => ( - - {`${player.username}'s - + + {`${player.username}'s + + ) )}
diff --git a/Frontend/src/app/components/player/player-search.tsx b/Frontend/src/app/components/player/player-search.tsx index bd2f792..44d925f 100644 --- a/Frontend/src/app/components/player/player-search.tsx +++ b/Frontend/src/app/components/player/player-search.tsx @@ -4,6 +4,7 @@ import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { redirect } from "next/navigation"; import { ReactElement } from "react"; +import SimpleTooltip from "@/components/simple-tooltip"; /** * Props for a player search. @@ -18,7 +19,7 @@ type PlayerSearchProps = { /** * A component for searching for a player. * - * @param query the query to search for + * @param query the original query to search for * @returns the search component jsx */ const PlayerSearch = ({ query }: PlayerSearchProps): ReactElement => { @@ -31,6 +32,7 @@ const PlayerSearch = ({ query }: PlayerSearchProps): ReactElement => { className="flex flex-col gap-7 justify-center items-center" action={handleRedirect} > + {/* Input */}
{ autoComplete="off" />
- Search + + {/* Search */} + + Search + ); }; diff --git a/Frontend/src/app/components/server/server-search.tsx b/Frontend/src/app/components/server/server-search.tsx index bb1888b..29732df 100644 --- a/Frontend/src/app/components/server/server-search.tsx +++ b/Frontend/src/app/components/server/server-search.tsx @@ -13,6 +13,7 @@ import { capitalize } from "@/app/common/string-utils"; import { redirect } from "next/navigation"; import { ReactElement } from "react"; import { ServerPlatform } from "restfulmc-lib"; +import SimpleTooltip from "@/components/simple-tooltip"; /** * Props for a server search. @@ -21,7 +22,7 @@ type ServerSearchProps = { /** * The original platform to query for. */ - platform: string | undefined; + platform: ServerPlatform | undefined; /** * The original hostname to query for. @@ -32,7 +33,8 @@ type ServerSearchProps = { /** * A component for searching for a server. * - * @param query the query to search for + * @param platform the original platform to query for + * @param hostname original hostname to query for * @returns the search component jsx */ const ServerSearch = ({ @@ -48,15 +50,12 @@ const ServerSearch = ({ className="flex flex-col gap-7 justify-center items-center" action={handleRedirect} > + {/* Input */}
{/* Platform Selection */}
- @@ -89,7 +88,11 @@ const ServerSearch = ({ />
- Search + + {/* Search */} + + Search + ); }; diff --git a/Frontend/src/app/components/simple-tooltip.tsx b/Frontend/src/app/components/simple-tooltip.tsx index 5061efb..6c62a27 100644 --- a/Frontend/src/app/components/simple-tooltip.tsx +++ b/Frontend/src/app/components/simple-tooltip.tsx @@ -12,7 +12,7 @@ type SimpleTooltipProps = { /** * The content to display in the tooltip. */ - content: string; + content: string | ReactNode; /** * The children to render in this tooltip.