diff --git a/package.json b/package.json index df613da..3c3e9f3 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 64151c0..48c45aa 100644 --- a/pnpm-lock.yaml +++ b/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'} diff --git a/src/app/components/card.tsx b/src/app/components/card.tsx index 096796a..b2452a7 100644 --- a/src/app/components/card.tsx +++ b/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
{children}
; } diff --git a/src/app/components/container.tsx b/src/app/components/container.tsx index 9a93be8..7c427c5 100644 --- a/src/app/components/container.tsx +++ b/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 (
diff --git a/src/app/components/error-card.tsx b/src/app/components/error-card.tsx index b42ab3c..14800d1 100644 --- a/src/app/components/error-card.tsx +++ b/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 (
diff --git a/src/app/components/icon/icon-props.ts b/src/app/components/icon/icon-props.ts deleted file mode 100644 index e7791a8..0000000 --- a/src/app/components/icon/icon-props.ts +++ /dev/null @@ -1,11 +0,0 @@ -export type IconProps = { - /** - * The size of the icon - */ - size?: number; - - /** - * The color of the icon - */ - color?: string; -}; diff --git a/src/app/components/icon/moon-icon.tsx b/src/app/components/icon/moon-icon.tsx deleted file mode 100644 index d8ec17b..0000000 --- a/src/app/components/icon/moon-icon.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { IconProps } from "./icon-props"; - -export function MoonIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element { - return ( - - - - ); -} diff --git a/src/app/components/icon/person-icon.tsx b/src/app/components/icon/person-icon.tsx deleted file mode 100644 index bbf5537..0000000 --- a/src/app/components/icon/person-icon.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { IconProps } from "./icon-props"; - -export function PersonIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element { - return ( - - - - ); -} diff --git a/src/app/components/icon/storage-icon.tsx b/src/app/components/icon/storage-icon.tsx deleted file mode 100644 index 368ac15..0000000 --- a/src/app/components/icon/storage-icon.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { IconProps } from "./icon-props"; - -export function StorageIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element { - return ( - - - - ); -} diff --git a/src/app/components/icon/sun-icon.tsx b/src/app/components/icon/sun-icon.tsx deleted file mode 100644 index d0e24a6..0000000 --- a/src/app/components/icon/sun-icon.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { IconProps } from "./icon-props"; - -export function SunIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element { - return ( - - - - ); -} diff --git a/src/app/components/icon/trending-up-icon.tsx b/src/app/components/icon/trending-up-icon.tsx deleted file mode 100644 index e29f862..0000000 --- a/src/app/components/icon/trending-up-icon.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { IconProps } from "./icon-props"; - -export function TrendingUpIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element { - return ( - - - - ); -} diff --git a/src/app/components/logo.tsx b/src/app/components/logo.tsx index bf602bd..b0c2e35 100644 --- a/src/app/components/logo.tsx +++ b/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 ( diff --git a/src/app/components/player/lookup-player.tsx b/src/app/components/player/lookup-player.tsx index cc845a2..eba140a 100644 --- a/src/app/components/player/lookup-player.tsx +++ b/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(""); diff --git a/src/app/components/rediect-button.tsx b/src/app/components/rediect-button.tsx index 53079fb..52fa4eb 100644 --- a/src/app/components/rediect-button.tsx +++ b/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 (
diff --git a/src/app/components/server/lookup-server.tsx b/src/app/components/server/lookup-server.tsx index eb12e86..74dcaf1 100644 --- a/src/app/components/server/lookup-server.tsx +++ b/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 ( diff --git a/src/app/components/stats.tsx b/src/app/components/stats.tsx index 381d847..cba9b1d 100644 --- a/src/app/components/stats.tsx +++ b/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: , + icon: , }, { id: "totalPlayerLookups", displayName: "Player Lookups", tooltip: "The total amount of player lookups", - icon: , + icon: , }, { id: "totalServerLookups", displayName: "Server Lookups", tooltip: "The total amount of server lookups", - icon: , + icon: , }, ]; diff --git a/src/app/components/theme-provider.tsx b/src/app/components/theme-provider.tsx index fcd72ba..f7273ad 100644 --- a/src/app/components/theme-provider.tsx +++ b/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 {children}; } diff --git a/src/app/components/theme-toggle-button.tsx b/src/app/components/theme-toggle-button.tsx index 4ea7b63..5f9f683 100644 --- a/src/app/components/theme-toggle-button.tsx +++ b/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 { SunIcon } from "./icon/sun-icon"; +import { ReactElement } from "react"; -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" ? : } + {theme === "dark" ? : } ); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3744cb0..3a30fe8 100644 --- a/src/app/layout.tsx +++ b/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 ( <>