Responsive Command

1"use client";
2
3import * as React from "react";
4import { Command as CommandPrimitive } from "cmdk";
5
6import { SearchIcon } from "lucide-react";
7
8import {
9  ResponsiveDialog,
10  ResponsiveDialogContent,
11  ResponsiveDialogDescription,
12  ResponsiveDialogHeader,
13  ResponsiveDialogTitle,
14  useResponsiveDialog,
15} from "@/components/ui/revola";
16import { cn } from "@/lib/utils";
17
18const ResponsiveCommand = React.forwardRef<
19  React.ComponentRef<typeof CommandPrimitive>,
20  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
21>(({ className, ...props }, ref) => {
22  return (
23    <CommandPrimitive
24      ref={ref}
25      className={cn("flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className)}
26      {...props}
27    />
28  );
29});
30ResponsiveCommand.displayName = CommandPrimitive.displayName;
31
32const ResponsiveCommandDialog = ({
33  title = "Command Palette",
34  description = "Search for a command to run...",
35  children,
36  className,
37  showCloseButton = true,
38  ...props
39}: React.ComponentPropsWithoutRef<typeof ResponsiveDialog> & {
40  title?: string;
41  description?: string;
42  className?: string;
43  showCloseButton?: boolean;
44}) => {
45  return (
46    <ResponsiveDialog shouldScaleBackground={false} {...props}>
47      <ResponsiveDialogContent
48        showCloseButton={showCloseButton}
49        className={cn("mx-auto overflow-hidden bg-popover sm:max-w-lg [&>button:last-child]:hidden", className)}
50      >
51        <ResponsiveDialogHeader className="sr-only">
52          <ResponsiveDialogTitle>{title}</ResponsiveDialogTitle>
53          <ResponsiveDialogDescription>{description}</ResponsiveDialogDescription>
54        </ResponsiveDialogHeader>
55        <ResponsiveCommand className="max-h-[100svh] [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2">
56          {children}
57        </ResponsiveCommand>
58      </ResponsiveDialogContent>
59    </ResponsiveDialog>
60  );
61};
62ResponsiveCommandDialog.displayName = "ResponsiveCommandDialog";
63
64const ResponsiveCommandInput = React.forwardRef<
65  React.ComponentRef<typeof CommandPrimitive.Input>,
66  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
67>(({ className, ...props }, ref) => {
68  return (
69// … truncated