fix return types

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.3",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@heroicons/react':
+    specifier: ^2.1.3
+    version: 2.1.3(react@18.2.0)
   '@radix-ui/react-context-menu':
     specifier: ^2.1.5
     version: 2.1.5(@types/react-dom@18.2.25)(@types/react@18.2.78)(react-dom@18.2.0)(react@18.2.0)
@@ -519,6 +522,14 @@ packages:
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
     dev: false
 
+  /@heroicons/react@2.1.3(react@18.2.0):
+    resolution: {integrity: sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==}
+    peerDependencies:
+      react: '>= 16'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}

src/app/components/card.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@/common/utils";
+import { ReactElement } from "react";
 
 export function Card({
   children,
@@ -6,6 +7,6 @@ export function Card({
 }: Readonly<{
   children: React.ReactNode;
   className?: string;
-}>): JSX.Element {
+}>): ReactElement {
   return <div className={cn("bg-secondary rounded-lg p-3", className)}>{children}</div>;
 }

src/app/components/container.tsx

@@ -1,10 +1,11 @@
+import { ReactElement } from "react";
 import NavBar from "./navbar";
 
 export default function Container({
   children,
 }: Readonly<{
   children: React.ReactNode;
-}>): JSX.Element {
+}>): ReactElement {
   return (
     <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 w-full xs:max-w-[1200px]">
       <NavBar />

src/app/components/error-card.tsx

@@ -1,10 +1,11 @@
+import { ReactElement } from "react";
 import { Card } from "./card";
 
 type ErrorProps = {
   message: string;
 };
 
-export function ErrorCard({ message }: ErrorProps): JSX.Element {
+export function ErrorCard({ message }: ErrorProps): ReactElement {
   return (
     <Card>
       <div className="flex flex-col justify-center text-center">

src/app/components/icon/icon-props.ts

@@ -1,11 +0,0 @@
-export type IconProps = {
-  /**
-   * The size of the icon
-   */
-  size?: number;
-
-  /**
-   * The color of the icon
-   */
-  color?: string;
-};

src/app/components/icon/moon-icon.tsx

@@ -1,12 +0,0 @@
-import { IconProps } from "./icon-props";
-
-export function MoonIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill={color} viewBox="0 -960 960 960">
-      <path
-        xmlns="http://www.w3.org/2000/svg"
-        d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q8 0 17 .5t23 1.5q-36 32-56 79t-20 99q0 90 63 153t153 63q52 0 99-18.5t79-51.5q1 12 1.5 19.5t.5 14.5q0 150-105 255T480-120Zm0-60q109 0 190-67.5T771-406q-25 11-53.667 16.5Q688.667-384 660-384q-114.689 0-195.345-80.655Q384-545.311 384-660q0-24 5-51.5t18-62.5q-98 27-162.5 109.5T180-480q0 125 87.5 212.5T480-180Zm-4-297Z"
-      />
-    </svg>
-  );
-}

src/app/components/icon/person-icon.tsx

@@ -1,12 +0,0 @@
-import { IconProps } from "./icon-props";
-
-export function PersonIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill={color} viewBox="0 -960 960 960">
-      <path
-        xmlns="http://www.w3.org/2000/svg"
-        d="M626-533q22.5 0 38.25-15.75T680-587q0-22.5-15.75-38.25T626-641q-22.5 0-38.25 15.75T572-587q0 22.5 15.75 38.25T626-533Zm-292 0q22.5 0 38.25-15.75T388-587q0-22.5-15.75-38.25T334-641q-22.5 0-38.25 15.75T280-587q0 22.5 15.75 38.25T334-533Zm146 272q66 0 121.5-35.5T682-393h-52q-23 40-63 61.5T480.5-310q-46.5 0-87-21T331-393h-53q26 61 81 96.5T480-261Zm0 181q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 340q142.375 0 241.188-98.812Q820-337.625 820-480t-98.812-241.188Q622.375-820 480-820t-241.188 98.812Q140-622.375 140-480t98.812 241.188Q337.625-140 480-140Z"
-      />
-    </svg>
-  );
-}

src/app/components/icon/storage-icon.tsx

@@ -1,12 +0,0 @@
-import { IconProps } from "./icon-props";
-
-export function StorageIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill={color} viewBox="0 -960 960 960">
-      <path
-        xmlns="http://www.w3.org/2000/svg"
-        d="M120-160v-148h720v148H120Zm60-38h72v-72h-72v72Zm-60-454v-148h720v148H120Zm60-38h72v-72h-72v72Zm-60 284v-148h720v148H120Zm60-38h72v-72h-72v72Z"
-      />
-    </svg>
-  );
-}

src/app/components/icon/sun-icon.tsx

@@ -1,9 +0,0 @@
-import { IconProps } from "./icon-props";
-
-export function SunIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill={color} viewBox="0 -960 960 960">
-      <path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z" />
-    </svg>
-  );
-}

src/app/components/icon/trending-up-icon.tsx

@@ -1,12 +0,0 @@
-import { IconProps } from "./icon-props";
-
-export function TrendingUpIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill={color} viewBox="0 -960 960 960">
-      <path
-        xmlns="http://www.w3.org/2000/svg"
-        d="m123-240-43-43 292-291 167 167 241-241H653v-60h227v227h-59v-123L538-321 371-488 123-240Z"
-      />
-    </svg>
-  );
-}

src/app/components/logo.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
+import { ReactElement } from "react";
 
-export default function Logo({ size = 30 }: Readonly<{ size?: number }>): JSX.Element {
+export default function Logo({ size = 30 }: Readonly<{ size?: number }>): ReactElement {
   return (
     <Image
       src="https://git.fascinated.cc/MinecraftUtilities/Assets/raw/branch/master/logo.png"

src/app/components/navbar.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { ReactElement } from "react";
 import Logo from "./logo";
 import { RedirectButton } from "./rediect-button";
 import { ToggleThemeButton } from "./theme-toggle-button";
@@ -16,7 +17,7 @@ const pages: Page[] = [
   { title: "API", url: "https://api.mcutils.xyz", openInNewTab: true },
 ];
 
-export default function NavBar(): JSX.Element {
+export default function NavBar(): ReactElement {
   return (
     <div className="bg-secondary w-full rounded-lg flex items-center gap-3 mt-2 bg-opacity-85 h-12">
       <Link href="/" className="flex items-center gap-2 pl-3 pr-1">

src/app/components/player/lookup-player.tsx

@@ -3,12 +3,12 @@
 import { useToast } from "@/common/use-toast";
 import { getPlayer } from "mcutils-library";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { ReactElement, useState } from "react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
-export function LookupPlayer(): JSX.Element {
+export function LookupPlayer(): ReactElement {
   const router = useRouter();
   const { toast } = useToast();
   const [id, setId] = useState("");

src/app/components/rediect-button.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { ReactElement } from "react";
 
 type ButtonProps = {
   title: string;
@@ -6,7 +7,7 @@ type ButtonProps = {
   openInNewTab?: boolean;
 };
 
-export function RedirectButton({ title, url, openInNewTab }: ButtonProps): JSX.Element {
+export function RedirectButton({ title, url, openInNewTab }: ButtonProps): ReactElement {
   return (
     <div className="w-fit rounded-lg">
       <Link href={url} target={openInNewTab ? "_blank" : ""}>

src/app/components/server/lookup-server.tsx

@@ -4,12 +4,12 @@ import { capitalizeFirstLetter } from "@/common/string-utils";
 import { useToast } from "@/common/use-toast";
 import { ServerPlatform, getServer } from "mcutils-library";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { ReactElement, useState } from "react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
-export function LookupServer(): JSX.Element {
+export function LookupServer(): ReactElement {
   const router = useRouter();
   const { toast } = useToast();
   const [hostname, setHostname] = useState("");
@@ -48,7 +48,7 @@ export function LookupServer(): JSX.Element {
     router.push(`/server/${platform}/${hostname}`);
   };
 
-  const LookupButton = ({ platform }: { platform: ServerPlatform }): JSX.Element => {
+  const LookupButton = ({ platform }: { platform: ServerPlatform }): ReactElement => {
     const name = capitalizeFirstLetter(platform);
     return (
       <Tooltip>

src/app/components/stats.tsx

@@ -1,11 +1,9 @@
 "use client";
 
-import { StorageIcon } from "@/app/components/icon/storage-icon";
 import { Stat } from "@/app/components/stat";
+import { ArrowTrendingUpIcon, ServerIcon, UserIcon } from "@heroicons/react/16/solid";
 import { ReactElement } from "react";
 import useWebSocket from "react-use-websocket";
-import { PersonIcon } from "./icon/person-icon";
-import { TrendingUpIcon } from "./icon/trending-up-icon";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 type Stat = {
@@ -20,19 +18,19 @@ const stats: Stat[] = [
     id: "totalRequests",
     displayName: "Total Requests",
     tooltip: "The total amount of requests to the API",
-    icon: <TrendingUpIcon />,
+    icon: <ArrowTrendingUpIcon width={24} height={24} />,
   },
   {
     id: "totalPlayerLookups",
     displayName: "Player Lookups",
     tooltip: "The total amount of player lookups",
-    icon: <PersonIcon />,
+    icon: <UserIcon width={24} height={24} />,
   },
   {
     id: "totalServerLookups",
     displayName: "Server Lookups",
     tooltip: "The total amount of server lookups",
-    icon: <StorageIcon />,
+    icon: <ServerIcon width={24} height={24} />,
   },
 ];
 

src/app/components/theme-provider.tsx

@@ -2,7 +2,8 @@
 
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { type ThemeProviderProps } from "next-themes/dist/types";
+import { ReactElement } from "react";
 
-export default function ThemeProvider({ children, ...props }: ThemeProviderProps): JSX.Element {
+export default function ThemeProvider({ children, ...props }: ThemeProviderProps): ReactElement {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }

src/app/components/theme-toggle-button.tsx

@@ -1,10 +1,10 @@
 "use client";
 
+import { MoonIcon, SunIcon } from "@heroicons/react/16/solid";
 import { useTheme } from "next-themes";
-import { MoonIcon } from "./icon/moon-icon";
+import { ReactElement } from "react";
-import { SunIcon } from "./icon/sun-icon";
 
-export function ToggleThemeButton(): JSX.Element {
+export function ToggleThemeButton(): ReactElement {
   const { theme, setTheme } = useTheme();
 
   return (
@@ -13,7 +13,7 @@ export function ToggleThemeButton(): JSX.Element {
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
       aria-label="Toggle Theme"
     >
-      {theme === "dark" ? <SunIcon /> : <MoonIcon color="#000" />}
+      {theme === "dark" ? <SunIcon width={24} height={24} /> : <MoonIcon width={24} height={24} color="#000" />}
     </button>
   );
 }

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { Metadata, Viewport } from "next";
 import "./globals.css";
 
 import Script from "next/script";
+import { ReactElement } from "react";
 import Config from "../../config.json";
 import Container from "./components/container";
 import ThemeProvider from "./components/theme-provider";
@@ -43,7 +44,7 @@ export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
-}>): JSX.Element {
+}>): ReactElement {
   return (
     <>
       <Script defer data-domain="mcutils.xyz" src="https://analytics.fascinated.cc/js/script.js" />