-
+
+
+
-
-
+
+
+
+ Copy Player Username
+
+
+
+ Copy Player UUID
+
+
+
+ Copy Share URL
+
+
+
)}
);
diff --git a/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx b/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx
index 79bd609..a28e168 100644
--- a/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx
+++ b/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx
@@ -1,6 +1,8 @@
import { Card } from "@/app/components/card";
+import { CopyButton } from "@/app/components/copy-button";
import { ErrorCard } from "@/app/components/error-card";
import { LookupServer } from "@/app/components/server/lookup-server";
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/app/components/ui/context-menu";
import { generateEmbed } from "@/common/embed";
import { formatNumber } from "@/common/number-utils";
import { capitalizeFirstLetter } from "@/common/string-utils";
@@ -118,39 +120,53 @@ export default async function Page({ params: { platform, hostname } }: Params):
{error &&
+
-
-
-
+
+
+
-
+ {player.username}
-{player.uniqueId}
-
+
-
+
- {player.username}
+{player.uniqueId}
+
-
- Skin Parts
-
- {Object.entries(player.skin.parts)
- .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
- .map(([part, url]) => {
- return (
-
-
-
- 
-
-
-
-
-
- );
- })}
+
- Click to view {player.username}'s {part} -
-
+
Skin Parts
+
+ {Object.entries(player.skin.parts)
+ .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
+ .map(([part, url]) => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+ })}
+
+ + Click to view {player.username}'s {part} +
+
- ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+ContextMenuCheckboxItem.displayName =
+ ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+ ContextMenu,
+ ContextMenuTrigger,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuCheckboxItem,
+ ContextMenuRadioItem,
+ ContextMenuLabel,
+ ContextMenuSeparator,
+ ContextMenuShortcut,
+ ContextMenuGroup,
+ ContextMenuPortal,
+ ContextMenuSub,
+ ContextMenuSubContent,
+ ContextMenuSubTrigger,
+ ContextMenuRadioGroup,
+}
- {favicon && (
-
+
+
+
+
+
+
+
+ Copy Server Hostname
+
+ {favicon && (
+
+ Copy Server Favicon URL
+
+ )}
+
+
)}
);
diff --git a/src/app/components/copy-button.tsx b/src/app/components/copy-button.tsx
new file mode 100644
index 0000000..bd591eb
--- /dev/null
+++ b/src/app/components/copy-button.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useToast } from "@/common/use-toast";
+import copy from "clipboard-copy";
+import { ReactElement } from "react";
+
+type CopyButtonProps = {
+ content: string;
+ children: React.ReactNode;
+};
+
+/**
+ * A button that copies the content to the clipboard
+ *
+ * @param props the properties for the button
+ * @returns the copy button
+ */
+export function CopyButton({ content, children }: CopyButtonProps): ReactElement {
+ const { toast } = useToast();
+
+ return (
+
+ );
+}
diff --git a/src/app/components/ui/context-menu.tsx b/src/app/components/ui/context-menu.tsx
new file mode 100644
index 0000000..371bee4
--- /dev/null
+++ b/src/app/components/ui/context-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/common/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+ React.ElementRef
-
- )}
+
+
-
+ {favicon && (
+
-
-
+
+ )}
-
-
- {server.hostname}
-
-
+
+ - Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)} -
+
+
+ {server.hostname}
+
+
+ + Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)} +
+
+ {server.motd.html.map((line, index) => {
+ return ;
+ })}
- {server.motd.html.map((line, index) => {
- return ;
- })}
-
-