fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-12-11 18:03:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update command ui component

Browse Source
This commit is contained in:
henrygd
2025-08-29 15:04:26 -04:00
parent 7697a12b42
commit 0e95caaee9
2 changed files with 100 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
beszel/site/src/components/command-palette.tsx
View File

@@ -71,7 +71,7 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
}} }}
> >
<Server className="me-2 size-4" /> <Server className="me-2 size-4" />
<span>{system.name}</span> <span className="max-w-60 truncate">{system.name}</span>
<CommandShortcut>{getHostDisplayValue(system)}</CommandShortcut> <CommandShortcut>{getHostDisplayValue(system)}</CommandShortcut>
</CommandItem> </CommandItem>
))} ))}

198
beszel/site/src/components/ui/command.tsx
View File

@@ -1,33 +1,41 @@
import * as React from "react" import * as React from "react"
import { DialogTitle, type DialogProps } from "@radix-ui/react-dialog"
import { Command as CommandPrimitive } from "cmdk" import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react" import { SearchIcon } from "lucide-react"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { Dialog, DialogContent } from "@/components/ui/dialog" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
const Command = React.forwardRef< function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
React.ElementRef<typeof CommandPrimitive>, return (
React.ComponentPropsWithoutRef<typeof CommandPrimitive> <CommandPrimitive
>(({ className, ...props }, ref) => ( data-slot="command"
<CommandPrimitive className={cn("bg-card flex h-full w-full flex-col overflow-hidden rounded-md", className)}
ref={ref} {...props}
className={cn("flex h-full w-full flex-col overflow-hidden bg-card", className)} />
{...props} )
/> }
))
Command.displayName = CommandPrimitive.displayName
interface CommandDialogProps extends DialogProps {} function CommandDialog({
title = "Command Palette",
const CommandDialog = ({ children, ...props }: CommandDialogProps) => { description = "Search for a command to run...",
children,
className,
showCloseButton = true,
...props
}: React.ComponentProps<typeof Dialog> & {
title?: string
description?: string
className?: string
showCloseButton?: boolean
}) {
return ( return (
<Dialog {...props}> <Dialog {...props}>
<DialogContent className="overflow-hidden p-0 shadow-lg"> <DialogHeader className="sr-only">
<div className="sr-only"> <DialogTitle>{title}</DialogTitle>
<DialogTitle>Command</DialogTitle> <DialogDescription>{description}</DialogDescription>
</div> </DialogHeader>
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"> <DialogContent className={cn("overflow-hidden p-0", className)}>
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children} {children}
</Command> </Command>
</DialogContent> </DialogContent>
@@ -35,89 +43,81 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
) )
} }
const CommandInput = React.forwardRef< function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
React.ElementRef<typeof CommandPrimitive.Input>, return (
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
>(({ className, ...props }, ref) => ( <SearchIcon className="size-4 shrink-0 opacity-50" />
<div className="flex items-center border-b px-3" cmdk-input-wrapper=""> <CommandPrimitive.Input
<Search className="me-2 h-4 w-4 shrink-0 opacity-50" /> data-slot="command-input"
<CommandPrimitive.Input className={cn(
ref={ref} "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
</div>
)
}
function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
return (
<CommandPrimitive.List
data-slot="command-list"
className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
{...props}
/>
)
}
function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />
}
function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
return (
<CommandPrimitive.Group
data-slot="command-group"
className={cn( className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
className className
)} )}
{...props} {...props}
/> />
</div> )
)) }
CommandInput.displayName = CommandPrimitive.Input.displayName function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
return (
const CommandList = React.forwardRef< <CommandPrimitive.Separator
React.ElementRef<typeof CommandPrimitive.List>, data-slot="command-separator"
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> className={cn("bg-border -mx-1 h-px", className)}
>(({ className, ...props }, ref) => ( {...props}
<CommandPrimitive.List />
ref={ref} )
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)} }
{...props}
/> function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
)) return (
<CommandPrimitive.Item
CommandList.displayName = CommandPrimitive.List.displayName data-slot="command-item"
className={cn(
const CommandEmpty = React.forwardRef< "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
React.ElementRef<typeof CommandPrimitive.Empty>, className
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> )}
>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />) {...props}
/>
CommandEmpty.displayName = CommandPrimitive.Empty.displayName )
}
const CommandGroup = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Group>, function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> return (
>(({ className, ...props }, ref) => ( <span
<CommandPrimitive.Group data-slot="command-shortcut"
ref={ref} className={cn("text-muted-foreground ml-auto text-xs tracking-wide", className)}
className={cn( {...props}
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", />
className )
)}
{...props}
/>
))
CommandGroup.displayName = CommandPrimitive.Group.displayName
const CommandSeparator = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName
const CommandItem = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default opacity-70 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent/60 aria-selected:opacity-90 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
className
)}
{...props}
/>
))
CommandItem.displayName = CommandPrimitive.Item.displayName
const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
return <span className={cn("ms-auto text-xs tracking-wide text-muted-foreground", className)} {...props} />
} }
CommandShortcut.displayName = "CommandShortcut"
export { export {
Command, Command,