systeme.io-task

1
"use client";
2

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

8
import { cn } from "~/shared/lib/utils";
9
import { Dialog, DialogContent } from "~/shared/ui/dialog";
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-popover text-popover-foreground",
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">
32
        <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">
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 className="flex items-center border-b px-3" cmdk-input-wrapper="">
45
    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
46
    <CommandPrimitive.Input
47
      ref={ref}
48
      className={cn(
49
        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
50
        className,
51
      )}
52
      {...props}
53
    />
54
  </div>
55
));
56

57
CommandInput.displayName = CommandPrimitive.Input.displayName;
58

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

70
CommandList.displayName = CommandPrimitive.List.displayName;
71

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

83
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
84

85
const CommandGroup = React.forwardRef<
86
  React.ElementRef<typeof CommandPrimitive.Group>,
87
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
88
>(({ className, ...props }, ref) => (
89
  <CommandPrimitive.Group
90
    ref={ref}
91
    className={cn(
92
      "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",
93
      className,
94
    )}
95
    {...props}
96
  />
97
));
98

99
CommandGroup.displayName = CommandPrimitive.Group.displayName;
100

101
const CommandSeparator = React.forwardRef<
102
  React.ElementRef<typeof CommandPrimitive.Separator>,
103
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
104
>(({ className, ...props }, ref) => (
105
  <CommandPrimitive.Separator
106
    ref={ref}
107
    className={cn("-mx-1 h-px bg-border", className)}
108
    {...props}
109
  />
110
));
111
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
112

113
const CommandItem = React.forwardRef<
114
  React.ElementRef<typeof CommandPrimitive.Item>,
115
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
116
>(({ className, ...props }, ref) => (
117
  <CommandPrimitive.Item
118
    ref={ref}
119
    className={cn(
120
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
121
      className,
122
    )}
123
    {...props}
124
  />
125
));
126

127
CommandItem.displayName = CommandPrimitive.Item.displayName;
128

129
const CommandShortcut = ({
130
  className,
131
  ...props
132
}: React.HTMLAttributes<HTMLSpanElement>) => {
133
  return (
134
    <span
135
      className={cn(
136
        "ml-auto text-xs tracking-widest text-muted-foreground",
137
        className,
138
      )}
139
      {...props}
140
    />
141
  );
142
};
143
CommandShortcut.displayName = "CommandShortcut";
144

145
export {
146
  Command,
147
  CommandDialog,
148
  CommandInput,
149
  CommandList,
150
  CommandEmpty,
151
  CommandGroup,
152
  CommandItem,
153
  CommandShortcut,
154
  CommandSeparator,
155
};
156