diff --git a/apps/www/package.json b/apps/www/package.json index 892e8c3..85930c5 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -24,6 +24,7 @@ "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.1", "@radix-ui/react-collapsible": "1.1.1", + "@radix-ui/react-context-menu": "^2.2.6", "@radix-ui/react-hover-card": "1.1.1", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-menubar": "1.1.1", diff --git a/apps/www/src/app/(main)/layout.tsx b/apps/www/src/app/(main)/layout.tsx index a686869..2eff33f 100644 --- a/apps/www/src/app/(main)/layout.tsx +++ b/apps/www/src/app/(main)/layout.tsx @@ -40,6 +40,7 @@ import { ClerkProvider } from "@clerk/nextjs"; import Link from "next/link"; import { NavBar } from "@/components/feat/navbar/navbar"; import { TooltipProvider } from "@/components/ui/tooltip"; +import { ThemeProvider } from "@/components/util/theme-provider"; const inter = Inter({ subsets: ["latin"] }); @@ -70,8 +71,15 @@ export default function RootLayout({ - -
{children}
+ + +
{children}
+ diff --git a/apps/www/src/components/feat/navbar/navbar.tsx b/apps/www/src/components/feat/navbar/navbar.tsx index 69faa6d..3b9536e 100644 --- a/apps/www/src/components/feat/navbar/navbar.tsx +++ b/apps/www/src/components/feat/navbar/navbar.tsx @@ -1,8 +1,19 @@ "use client"; import { BrandingGenericIcon } from "@/components/feat/icons/branding-icons"; +import { + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuTrigger, +} from "@/components/ui/context-menu"; +import Github from "@/components/ui/github"; +import { ALegacy } from "@/components/util/link"; +import { ModeToggle } from "@/components/util/mode-toggle"; import { version } from "@/config/version"; import { useScroll } from "@/lib/hooks/use-scroll"; import { cn } from "@/lib/utils"; +import { ServerCrash } from "lucide-react"; import Link from "next/link"; export function NavBar() { @@ -12,19 +23,45 @@ export function NavBar() {
- - - - MHSF - - v{version} - - - + + + + + + + MHSF + + v{version} + + + + + + + + + Go home + + + + + + + + Open GitHub + + + + + + + + +
); } diff --git a/apps/www/src/components/feat/server-list/statistics.tsx b/apps/www/src/components/feat/server-list/statistics.tsx index 2ce00c6..43373a7 100644 --- a/apps/www/src/components/feat/server-list/statistics.tsx +++ b/apps/www/src/components/feat/server-list/statistics.tsx @@ -6,9 +6,10 @@ import { TooltipTrigger, } from "@/components/ui/tooltip"; import type { OnlineServer } from "@/lib/types/mh-server"; -import { InfoIcon } from "lucide-react"; +import { ChartArea, InfoIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; +import IconDisplay from "../icons/minecraft-icon-display"; export function Statistics({ totalPlayers, @@ -70,8 +71,8 @@ export function Statistics({ className={ !averagesLoading && !error ? (averages?.totalPlayerAverage as number) > totalPlayers - ? "text-red-400" - : "text-green-400" + ? "text-rose-400" + : "text-lime-400" : "" } > @@ -113,8 +114,8 @@ export function Statistics({ className={ !averagesLoading && !error ? (averages?.totalServerAverage as number) > totalServers - ? "text-red-400" - : "text-green-400" + ? "text-rose-400" + : "text-lime-400" : "" } > @@ -136,8 +137,13 @@ export function Statistics({ - Top Server
- {topServer.name} + + Top Server + {" "} + + {topServer.name} + + ); diff --git a/apps/www/src/components/ui/context-menu.tsx b/apps/www/src/components/ui/context-menu.tsx new file mode 100644 index 0000000..b39a5be --- /dev/null +++ b/apps/www/src/components/ui/context-menu.tsx @@ -0,0 +1,215 @@ +"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 "@/lib/utils"; +import { Material } from "./material"; + +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, + 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) => ( + +)); +ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName; + +const ContextMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + +
+ + {props.children} + +
+ + +)); +ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName; + +const ContextMenuItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean; + } +>(({ className, inset, ...props }, ref) => ( + +)); +ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName; + +const ContextMenuCheckboxItem = React.forwardRef< + React.ElementRef, + 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) => ( + +)); +ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName; + +const ContextMenuSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName; + +const ContextMenuShortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ); +}; +ContextMenuShortcut.displayName = "ContextMenuShortcut"; + +export { + ContextMenu, + ContextMenuTrigger, + ContextMenuContent, + ContextMenuItem, + ContextMenuCheckboxItem, + ContextMenuRadioItem, + ContextMenuLabel, + ContextMenuSeparator, + ContextMenuShortcut, + ContextMenuGroup, + ContextMenuPortal, + ContextMenuSub, + ContextMenuSubContent, + ContextMenuSubTrigger, + ContextMenuRadioGroup, +}; diff --git a/apps/www/src/components/ui/dropdown-menu.tsx b/apps/www/src/components/ui/dropdown-menu.tsx index 082639f..c522d38 100644 --- a/apps/www/src/components/ui/dropdown-menu.tsx +++ b/apps/www/src/components/ui/dropdown-menu.tsx @@ -1,27 +1,28 @@ -"use client" +"use client"; -import * as React from "react" -import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" -import { Check, ChevronRight, Circle } from "lucide-react" +import * as React from "react"; +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; +import { Check, ChevronRight, Circle } from "lucide-react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; +import { Material } from "./material"; -const DropdownMenu = DropdownMenuPrimitive.Root +const DropdownMenu = DropdownMenuPrimitive.Root; -const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; -const DropdownMenuGroup = DropdownMenuPrimitive.Group +const DropdownMenuGroup = DropdownMenuPrimitive.Group; -const DropdownMenuPortal = DropdownMenuPrimitive.Portal +const DropdownMenuPortal = DropdownMenuPrimitive.Portal; -const DropdownMenuSub = DropdownMenuPrimitive.Sub +const DropdownMenuSub = DropdownMenuPrimitive.Sub; -const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, children, ...props }, ref) => ( -)) +)); DropdownMenuSubTrigger.displayName = - DropdownMenuPrimitive.SubTrigger.displayName + DropdownMenuPrimitive.SubTrigger.displayName; const DropdownMenuSubContent = React.forwardRef< React.ElementRef, @@ -52,9 +53,9 @@ const DropdownMenuSubContent = React.forwardRef< )} {...props} /> -)) +)); DropdownMenuSubContent.displayName = - DropdownMenuPrimitive.SubContent.displayName + DropdownMenuPrimitive.SubContent.displayName; const DropdownMenuContent = React.forwardRef< React.ElementRef, @@ -63,35 +64,47 @@ const DropdownMenuContent = React.forwardRef< + > +
+ +
+ {props.children} +
+ +
+ -)) -DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName +)); +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName; const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, ...props }, ref) => ( svg]:size-4 [&>svg]:shrink-0", - inset && "pl-8", + "w-full px-2 rounded-lg z-[100] min-h-[36px] font-normal flex items-center cursor-pointer hover:dark:bg-zinc-800/70", + props.disabled ? "opacity-70 pointer-events-none cursor-not-allowed" : "", + "duration-100 border border-transparent bg-transparent hover:bg-slate-100 dark:text-zinc-200", className )} {...props} /> -)) -DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName +)); +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName; const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, @@ -113,9 +126,9 @@ const DropdownMenuCheckboxItem = React.forwardRef< {children} -)) +)); DropdownMenuCheckboxItem.displayName = - DropdownMenuPrimitive.CheckboxItem.displayName + DropdownMenuPrimitive.CheckboxItem.displayName; const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, @@ -136,13 +149,13 @@ const DropdownMenuRadioItem = React.forwardRef< {children} -)) -DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName +)); +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName; const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, ...props }, ref) => ( -)) -DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName +)); +DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName; const DropdownMenuSeparator = React.forwardRef< React.ElementRef, @@ -166,8 +179,8 @@ const DropdownMenuSeparator = React.forwardRef< className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} /> -)) -DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName +)); +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName; const DropdownMenuShortcut = ({ className, @@ -178,9 +191,9 @@ const DropdownMenuShortcut = ({ className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} /> - ) -} -DropdownMenuShortcut.displayName = "DropdownMenuShortcut" + ); +}; +DropdownMenuShortcut.displayName = "DropdownMenuShortcut"; export { DropdownMenu, @@ -198,4 +211,4 @@ export { DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, -} +}; diff --git a/apps/www/src/components/ui/menu.tsx b/apps/www/src/components/ui/menu.tsx deleted file mode 100644 index 916cb2a..0000000 --- a/apps/www/src/components/ui/menu.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { cn } from "@/lib/utils"; -import * as PopoverPrimitive from "@radix-ui/react-popover"; -import * as React from "react"; -import { Material } from "./material"; -import { Button, type ButtonProps } from "./button"; - -const MenuContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->( - ( - { className, align = "start", side = "bottom", sideOffset = 4, ...props }, - ref - ) => ( - - -
- -
- {props.children} -
- -
- - - ) -); - -MenuContent.displayName = PopoverPrimitive.Content.displayName; - -function MenuButton(props: ButtonProps) { - const variant = props.variant ?? "tertiary"; - const alignment = props.alignment ?? "left"; - - return ( - + + + setTheme("light")}> + Light + + setTheme("dark")}> + Dark + + setTheme("system")}> + System + + + + ); +} diff --git a/yarn.lock b/yarn.lock index 2d6ad90..b85527c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1639,7 +1639,7 @@ resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz#6f766faa975f8738269ebb8a23bad4f5a8d2faec" integrity sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw== -"@radix-ui/react-context-menu@^2.1.5": +"@radix-ui/react-context-menu@^2.1.5", "@radix-ui/react-context-menu@^2.2.6": version "2.2.6" resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-2.2.6.tgz#752fd1d91f92bba287ef2b558770f4ca7d74523e" integrity sha512-aUP99QZ3VU84NPsHeaFt4cQUNgJqFsLLOt/RbbWXszZ6MP0DpDyjkFZORr4RpAEx3sUBk+Kc8h13yGtC5Qw8dg==