langfuse

1
"use client";
2

3
import * as React from "react";
4
import { type DialogProps } from "@radix-ui/react-dialog";
5
import { Command as CommandPrimitive } from "cmdk";
6
import { Search } from "lucide-react";
7

8
import { Dialog, DialogContent } from "@/src/components/ui/dialog";
9
import { cn } from "@/src/utils/tailwind";
10

11
const Command = React.forwardRef<
12
  React.ElementRef<typeof CommandPrimitive>,
13
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
14
>(({ className, ...props }, ref) => (
15
  <CommandPrimitive
16
    ref={ref}
17
    className={cn(
18
      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
19
      className,
20
    )}
21
    {...props}
22
  />
23
));
24
Command.displayName = CommandPrimitive.displayName;
25

26
interface CommandDialogProps extends DialogProps {}
27

28
const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
29
  return (
30
    <Dialog {...props}>
31
      <DialogContent className="overflow-hidden p-0 shadow-lg">
32
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-slate-500 dark:[&_[cmdk-group-heading]]:text-slate-400 [&_[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">
33
          {children}
34
        </Command>
35
      </DialogContent>
36
    </Dialog>
37
  );
38
};
39

40
const CommandInput = React.forwardRef<
41
  React.ElementRef<typeof CommandPrimitive.Input>,
42
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
43
>(({ className, ...props }, ref) => (
44
  <div
45
    className="flex items-center rounded-lg border px-3"
46
    cmdk-input-wrapper=""
47
  >
48
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
49
    <CommandPrimitive.Input
50
      ref={ref}
51
      className={cn(
52
        "flex h-11 w-full rounded-md border-transparent bg-transparent py-3 text-sm outline-none placeholder:text-slate-500 focus:border-0  focus:border-none focus:border-transparent focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-slate-400	",
53
        className,
54
      )}
55
      {...props}
56
    />
57
  </div>
58
));
59

60
CommandInput.displayName = CommandPrimitive.Input.displayName;
61

62
const CommandList = React.forwardRef<
63
  React.ElementRef<typeof CommandPrimitive.List>,
64
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
65
>(({ className, ...props }, ref) => (
66
  <CommandPrimitive.List
67
    ref={ref}
68
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
69
    {...props}
70
  />
71
));
72

73
CommandList.displayName = CommandPrimitive.List.displayName;
74

75
const CommandEmpty = React.forwardRef<
76
  React.ElementRef<typeof CommandPrimitive.Empty>,
77
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
78
>((props, ref) => (
79
  <CommandPrimitive.Empty
80
    ref={ref}
81
    className="py-6 text-center text-sm"
82
    {...props}
83
  />
84
));
85

86
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
87

88
const CommandGroup = React.forwardRef<
89
  React.ElementRef<typeof CommandPrimitive.Group>,
90
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
91
>(({ className, ...props }, ref) => (
92
  <CommandPrimitive.Group
93
    ref={ref}
94
    className={cn(
95
      "overflow-hidden p-1 text-slate-950 dark:text-slate-50 [&_[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-slate-500 dark:[&_[cmdk-group-heading]]:text-slate-400",
96
      className,
97
    )}
98
    {...props}
99
  />
100
));
101

102
CommandGroup.displayName = CommandPrimitive.Group.displayName;
103

104
const CommandSeparator = React.forwardRef<
105
  React.ElementRef<typeof CommandPrimitive.Separator>,
106
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
107
>(({ className, ...props }, ref) => (
108
  <CommandPrimitive.Separator
109
    ref={ref}
110
    className={cn("-mx-1 h-px bg-slate-200 dark:bg-slate-800", className)}
111
    {...props}
112
  />
113
));
114
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
115

116
const CommandItem = React.forwardRef<
117
  React.ElementRef<typeof CommandPrimitive.Item>,
118
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
119
>(({ className, ...props }, ref) => (
120
  <CommandPrimitive.Item
121
    ref={ref}
122
    className={cn(
123
      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-slate-100 aria-selected:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-slate-800 dark:aria-selected:text-slate-50",
124
      className,
125
    )}
126
    {...props}
127
  />
128
));
129

130
CommandItem.displayName = CommandPrimitive.Item.displayName;
131

132
const CommandShortcut = ({
133
  className,
134
  ...props
135
}: React.HTMLAttributes<HTMLSpanElement>) => {
136
  return (
137
    <span
138
      className={cn(
139
        "ml-auto text-xs tracking-widest text-slate-500 dark:text-slate-400",
140
        className,
141
      )}
142
      {...props}
143
    />
144
  );
145
};
146
CommandShortcut.displayName = "CommandShortcut";
147

148
export {
149
  Command,
150
  CommandDialog,
151
  CommandInput,
152
  CommandList,
153
  CommandEmpty,
154
  CommandGroup,
155
  CommandItem,
156
  CommandShortcut,
157
  CommandSeparator,
158
};
159