Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
2.2 kB · 86 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687import { Icon } from "@thorium/ui/Icon";import { cn } from "@thorium/utils/cn";import React from "react";import { Menu as AriaMenu, MenuItem as AriaMenuItem, MenuSection as AriaMenuSection, MenuTrigger as AriaMenuTrigger, SubmenuTrigger as AriaSubmenuTrigger, type MenuItemProps, type MenuProps, type MenuSectionProps, type MenuTriggerProps, type SubmenuTriggerProps, Popover, Text,} from "react-aria-components";
import "./Menu.css";
export function MenuTrigger(props: MenuTriggerProps) { const [trigger, menu] = React.Children.toArray(props.children) as [ React.ReactElement, React.ReactElement, ]; return ( <AriaMenuTrigger {...props}> {trigger} <Popover>{menu}</Popover> </AriaMenuTrigger> );}
export function Menu<T extends object>(props: MenuProps<T>) { return ( <AriaMenu {...props} className={cn( "react-aria-Menu menu-dropdown bg-black/60 backdrop-blur backdrop-brightness-200 text-white border-white border rounded", props.className, )} > {props.children} </AriaMenu> );}
export function MenuItem(props: Omit<MenuItemProps, "children"> & { children?: React.ReactNode }) { const textValue = props.textValue || (typeof props.children === "string" ? props.children : undefined); return ( <AriaMenuItem {...props} textValue={textValue}> {({ hasSubmenu, isSelected, selectionMode }) => ( <> {isSelected && selectionMode === "multiple" ? <Icon name="check" /> : null} {isSelected && selectionMode === "single" ? <Icon name="circle-dot" /> : null} {typeof props.children === "string" ? ( <Text slot="label">{props.children}</Text> ) : ( props.children )} {hasSubmenu && <Icon name="chevron-right" />} </> )} </AriaMenuItem> );}
export function MenuSection<T extends object>(props: MenuSectionProps<T>) { return <AriaMenuSection {...props} />;}
export function SubmenuTrigger(props: SubmenuTriggerProps) { const [trigger, menu] = React.Children.toArray(props.children) as [ React.ReactElement, React.ReactElement, ]; return ( <AriaSubmenuTrigger {...props}> {trigger} <Popover offset={-2} crossOffset={-4}> {menu} </Popover> </AriaSubmenuTrigger> );}