mirror of
https://github.com/DeveloLongScript/MHSF.git
synced 2026-05-07 17:54:59 -05:00
feat: navbar context menu
This commit is contained in:
dvelo
parent
335ac6d31c
commit
4082529280
@ -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",
|
||||
|
||||
@ -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({
|
||||
</main>
|
||||
</noscript>
|
||||
<IsScript>
|
||||
<NavBar />
|
||||
<div className="pt-16">{children}</div>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<NavBar />
|
||||
<div className="pt-16">{children}</div>
|
||||
</ThemeProvider>
|
||||
</IsScript>
|
||||
</TooltipProvider>
|
||||
</body>
|
||||
|
||||
@ -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() {
|
||||
<div
|
||||
className={cn(
|
||||
"w-screen h-[3rem] grid-cols-3 fixed backdrop-blur-xl z-10 flex",
|
||||
"items-center justify-self-start me-auto pl-4 flex-1 transition-all",
|
||||
"items-center justify-self-start me-auto pl-4 flex-1 transition-all justify-between",
|
||||
showBorder ? "border-b" : ""
|
||||
)}
|
||||
>
|
||||
<Link className="gap-5 flex items-center " href="/">
|
||||
<BrandingGenericIcon className="max-w-[32px] max-h-[32px] mt-0.5" />
|
||||
<span className="gap-2 flex group hover:text-blue-500 hover:underline transition-all">
|
||||
<strong className="">MHSF</strong>
|
||||
<span className="text-muted-foreground group-hover:text-blue-500 transition-all">
|
||||
v{version}
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
<span>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger>
|
||||
<Link className="gap-5 flex items-center " href="/">
|
||||
<BrandingGenericIcon className="max-w-[32px] max-h-[32px] mt-0.5" />
|
||||
<span className="gap-2 flex group hover:text-blue-500 hover:underline transition-all">
|
||||
<strong className="">MHSF</strong>
|
||||
<span className="text-muted-foreground group-hover:text-blue-500 transition-all">
|
||||
v{version}
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent className="overflow-hidden min-w-[300px]">
|
||||
<ALegacy href="Special:Root">
|
||||
<ContextMenuItem>
|
||||
<span className="pl-2 flex gap-2 items-center">
|
||||
<ServerCrash size={16} /> Go home
|
||||
</span>
|
||||
</ContextMenuItem>
|
||||
</ALegacy>
|
||||
<ContextMenuSeparator />
|
||||
<ALegacy href="Special:GitHub">
|
||||
<ContextMenuItem>
|
||||
<span className="pl-2 flex gap-2 items-center">
|
||||
<Github /> Open GitHub
|
||||
</span>
|
||||
</ContextMenuItem>
|
||||
</ALegacy>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
</span>
|
||||
<span className="mr-3">
|
||||
<ModeToggle />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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({
|
||||
</span>
|
||||
</Material>
|
||||
<Material className="gap-2">
|
||||
<strong>Top Server</strong> <br />
|
||||
<span className="text-lg"> {topServer.name}</span>
|
||||
<strong className="justify-between flex items-center">
|
||||
Top Server <ChartArea size={16} className="text-muted-foreground" />
|
||||
</strong>{" "}
|
||||
<span className="text-lg gap-2 flex items-center">
|
||||
{topServer.name}
|
||||
<IconDisplay server={topServer} />
|
||||
</span>
|
||||
</Material>
|
||||
</div>
|
||||
);
|
||||
|
||||
215
apps/www/src/components/ui/context-menu.tsx
Normal file
215
apps/www/src/components/ui/context-menu.tsx
Normal file
@ -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<typeof ContextMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto h-4 w-4" />
|
||||
</ContextMenuPrimitive.SubTrigger>
|
||||
));
|
||||
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
|
||||
|
||||
const ContextMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
|
||||
|
||||
const ContextMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Portal>
|
||||
<ContextMenuPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"backdrop-blur-xl w-max max-w-[280px] z-[100] origin-top-left max-h-[32rem] overflow-auto list-none shadow-xl rounded-xl",
|
||||
className
|
||||
)}
|
||||
data-align="end"
|
||||
data-side="left"
|
||||
{...props}
|
||||
>
|
||||
<div className="animate-scale-in">
|
||||
<Material
|
||||
className="flex flex-col py-2 list-none bg-white/80 dark:bg-zinc-900/80 px-2"
|
||||
color="distinct"
|
||||
padding="none"
|
||||
rounding="xl"
|
||||
>
|
||||
{props.children}
|
||||
</Material>
|
||||
</div>
|
||||
</ContextMenuPrimitive.Content>
|
||||
</ContextMenuPrimitive.Portal>
|
||||
));
|
||||
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
|
||||
|
||||
const ContextMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"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}
|
||||
/>
|
||||
));
|
||||
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
|
||||
|
||||
const ContextMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.CheckboxItem>
|
||||
));
|
||||
ContextMenuCheckboxItem.displayName =
|
||||
ContextMenuPrimitive.CheckboxItem.displayName;
|
||||
|
||||
const ContextMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<Circle className="h-4 w-4 fill-current" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.RadioItem>
|
||||
));
|
||||
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
|
||||
|
||||
const ContextMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold text-foreground",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
|
||||
|
||||
const ContextMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px ", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
|
||||
|
||||
const ContextMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
ContextMenuShortcut.displayName = "ContextMenuShortcut";
|
||||
|
||||
export {
|
||||
ContextMenu,
|
||||
ContextMenuTrigger,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuShortcut,
|
||||
ContextMenuGroup,
|
||||
ContextMenuPortal,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuRadioGroup,
|
||||
};
|
||||
@ -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<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
@ -36,9 +37,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
|
||||
{children}
|
||||
<ChevronRight className="ml-auto" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
))
|
||||
));
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName
|
||||
DropdownMenuPrimitive.SubTrigger.displayName;
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
@ -52,9 +53,9 @@ const DropdownMenuSubContent = React.forwardRef<
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
));
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName
|
||||
DropdownMenuPrimitive.SubContent.displayName;
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
@ -63,35 +64,47 @@ const DropdownMenuContent = React.forwardRef<
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
"backdrop-blur-xl w-max z-[100] max-w-[280px] origin-top-left max-h-[32rem] overflow-auto list-none shadow-xl rounded-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
>
|
||||
<div className="animate-scale-in">
|
||||
<Material
|
||||
className="flex flex-col py-2 list-none bg-white/80 dark:bg-zinc-900/80 px-2"
|
||||
color="distinct"
|
||||
padding="none"
|
||||
rounding="xl"
|
||||
>
|
||||
<div className="overflow-y-auto max-h-[calc(32rem-1rem)]">
|
||||
{props.children}
|
||||
</div>
|
||||
</Material>
|
||||
</div>
|
||||
</DropdownMenuPrimitive.Content>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
))
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||
));
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>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<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
@ -113,9 +126,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
));
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName;
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
@ -136,13 +149,13 @@ const DropdownMenuRadioItem = React.forwardRef<
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
))
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||
));
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
@ -154,8 +167,8 @@ const DropdownMenuLabel = React.forwardRef<
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||
));
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
@ -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,
|
||||
}
|
||||
};
|
||||
|
||||
@ -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<typeof PopoverPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||
>(
|
||||
(
|
||||
{ className, align = "start", side = "bottom", sideOffset = 4, ...props },
|
||||
ref
|
||||
) => (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
side={side}
|
||||
className={cn(
|
||||
"backdrop-blur-xl w-max max-w-[280px] origin-top-left max-h-[32rem] overflow-auto list-none shadow-xl rounded-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="animate-scale-in">
|
||||
<Material
|
||||
className="flex flex-col py-2 list-none bg-white/80 dark:bg-zinc-900/80 px-2"
|
||||
color="distinct"
|
||||
padding="none"
|
||||
rounding="xl"
|
||||
>
|
||||
<div className="overflow-y-auto max-h-[calc(32rem-1rem)]">
|
||||
{props.children}
|
||||
</div>
|
||||
</Material>
|
||||
</div>
|
||||
</PopoverPrimitive.Content>
|
||||
</PopoverPrimitive.Portal>
|
||||
)
|
||||
);
|
||||
|
||||
MenuContent.displayName = PopoverPrimitive.Content.displayName;
|
||||
|
||||
function MenuButton(props: ButtonProps) {
|
||||
const variant = props.variant ?? "tertiary";
|
||||
const alignment = props.alignment ?? "left";
|
||||
|
||||
return (
|
||||
<Button
|
||||
rounding="none"
|
||||
className={cn(
|
||||
"w-full px-2 rounded-lg min-h-[36px] font-normal flex items-center",
|
||||
props.disabled
|
||||
? "opacity-70 pointer-events-none cursor-not-allowed"
|
||||
: "",
|
||||
variant === "tertiary" ? "hover:dark:bg-zinc-800/70" : "",
|
||||
"duration-100",
|
||||
props.className
|
||||
)}
|
||||
variant={variant}
|
||||
alignment={alignment}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function MenuButtonPrefix({ children }: { children: React.ReactNode }) {
|
||||
return <span className="contents flex-shrink-0">{children}</span>;
|
||||
}
|
||||
|
||||
function MenuSeparator({ children }: { children?: React.ReactNode }) {
|
||||
return (
|
||||
<span className="text-slate-800 dark:text-zinc-200 text-xs font-medium py-2 px-2 block">
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export { MenuContent, MenuButton, MenuButtonPrefix, MenuSeparator };
|
||||
@ -18,7 +18,7 @@ const Separator = React.forwardRef<
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-slate-200",
|
||||
"shrink-0 dark:bg-border bg-slate-200 ",
|
||||
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
||||
className
|
||||
)}
|
||||
|
||||
@ -69,7 +69,7 @@ export function ALegacy({
|
||||
return (
|
||||
<NextLink
|
||||
href={pageFind(href || "") || "#"}
|
||||
className="no-underline transition duration-300 hover:underline "
|
||||
className="no-underline transition duration-300 "
|
||||
title={href}
|
||||
>
|
||||
{(href || "").startsWith("Docs:") && (
|
||||
@ -95,7 +95,8 @@ export const pageFind = (text: string) => {
|
||||
if (text === "Special:AccountOptions") return "/account/settings/options";
|
||||
if (text.startsWith("Server:") && text.endsWith("/Customization"))
|
||||
return "/server/" + text.substring(7, text.length - 14) + "/customization";
|
||||
if (text === "Special:ClerkConvertionPage") return process.env.NEXT_PUBLIC_CLERK_SWITCH_DOMAIN;
|
||||
if (text === "Special:ClerkConvertionPage")
|
||||
return process.env.NEXT_PUBLIC_CLERK_SWITCH_DOMAIN;
|
||||
if (text.startsWith("Server:")) return "/server/" + text.substring(7);
|
||||
if (text.startsWith("Wiki:"))
|
||||
return "https://minehut.wiki.gg/wiki/" + text.substring(5);
|
||||
|
||||
42
apps/www/src/components/util/mode-toggle.tsx
Normal file
42
apps/www/src/components/util/mode-toggle.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "../ui/dropdown-menu";
|
||||
|
||||
export function ModeToggle() {
|
||||
const { setTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
className="flex items-center"
|
||||
size="square-lg"
|
||||
>
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setTheme("light")}>
|
||||
Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||
Dark
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("system")}>
|
||||
System
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
@ -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==
|
||||
|
||||
Loading…
Reference in New Issue
Block a user