Glass Command

1'use client'
2 
3import * as React from 'react'
4import { Command as CommandPrimitive } from 'cmdk'
5import { Search } from 'lucide-react'
6 
7import { cn } from '@/lib/utils'
8import { GlassDialog, GlassDialogContent } from './glass-dialog'
9 
10const GlassCommand = React.forwardRef<
11  React.ComponentRef<typeof CommandPrimitive>,
12  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
13>(({ className, ...props }, ref) => (
14  <CommandPrimitive
15    ref={ref}
16    className={cn(
17      'flex h-full w-full flex-col overflow-hidden rounded-2xl border border-glass-edge bg-glass-stronger backdrop-blur-2xl backdrop-saturate-150 shadow-[0_16px_48px_rgba(28,25,20,0.12)]',
18      className,
19    )}
20    {...props}
21  />
22))
23GlassCommand.displayName = CommandPrimitive.displayName
24 
25interface GlassCommandDialogProps extends React.ComponentPropsWithoutRef<typeof GlassDialog> {}
26 
27function GlassCommandDialog({ children, ...props }: GlassCommandDialogProps) {
28  return (
29    <GlassDialog {...props}>
30      <GlassDialogContent className="overflow-hidden p-0">
31        <CommandPrimitive className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-mono [&_[cmdk-group-heading]]:text-[0.6875rem] [&_[cmdk-group-heading]]:tracking-[0.15em] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3">
32          {children}
33        </CommandPrimitive>
34      </GlassDialogContent>
35    </GlassDialog>
36  )
37}
38 
39const GlassCommandInput = React.forwardRef<
40  React.ComponentRef<typeof CommandPrimitive.Input>,
41  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
42>(({ className, ...props }, ref) => (
43  <div className="flex items-center gap-2 border-b border-foreground/10 px-3.5" cmdk-input-wrapper="">
44    <Search className="size-4 shrink-0 text-muted-foreground" />
45    <CommandPrimitive.Input
46      ref={ref}
47      className={cn(
48        'flex h-11 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
49        className,
50      )}
51      {...props}
52    />
53  </div>
54))
55GlassCommandInput.displayName = CommandPrimitive.Input.displayName
56 
57const GlassCommandList = React.forwardRef<
58  React.ComponentRef<typeof CommandPrimitive.List>,
59  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
60>(({ className, ...props }, ref) => (
61  <CommandPrimitive.List
62// … truncated