WaledRashed24/comics

1"use client"2 3import * as React from "react"4import { DialogProps } from "@radix-ui/react-dialog"5import { Command as CommandPrimitive } from "cmdk"6import { Search } from "lucide-react"7 8import { cn } from "@/lib/utils"9import { Dialog, DialogContent } from "@/components/ui/dialog"10 11const Command = React.forwardRef<12  React.ElementRef<typeof CommandPrimitive>,13  React.ComponentPropsWithoutRef<typeof CommandPrimitive>14>(({ className, ...props }, ref) => (15  <CommandPrimitive16    ref={ref}17    className={cn(18      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-stone-950 dark:bg-stone-950 dark:text-stone-50",19      className20    )}21    {...props}22  />23))24Command.displayName = CommandPrimitive.displayName25 26interface CommandDialogProps extends DialogProps {}27 28const 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-stone-500 [&_[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 dark:[&_[cmdk-group-heading]]:text-stone-400">33          {children}34        </Command>35      </DialogContent>36    </Dialog>37  )38}39 40const 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    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />46    <CommandPrimitive.Input47      ref={ref}48      className={cn(49        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-stone-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-stone-400",50        className51      )}52      {...props}53    />54  </div>55))56 57CommandInput.displayName = CommandPrimitive.Input.displayName58 59const CommandList = React.forwardRef<60  React.ElementRef<typeof CommandPrimitive.List>,61  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>62>(({ className, ...props }, ref) => (63  <CommandPrimitive.List64    ref={ref}65    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}66    {...props}67  />68))69 70CommandList.displayName = CommandPrimitive.List.displayName71 72const CommandEmpty = React.forwardRef<73  React.ElementRef<typeof CommandPrimitive.Empty>,74  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>75>((props, ref) => (76  <CommandPrimitive.Empty77    ref={ref}78    className="py-6 text-center text-sm"79    {...props}80  />81))82 83CommandEmpty.displayName = CommandPrimitive.Empty.displayName84 85const CommandGroup = React.forwardRef<86  React.ElementRef<typeof CommandPrimitive.Group>,87  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>88>(({ className, ...props }, ref) => (89  <CommandPrimitive.Group90    ref={ref}91    className={cn(92      "overflow-hidden p-1 text-stone-950 [&_[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-stone-500 dark:text-stone-50 dark:[&_[cmdk-group-heading]]:text-stone-400",93      className94    )}95    {...props}96  />97))98 99CommandGroup.displayName = CommandPrimitive.Group.displayName100 101const CommandSeparator = React.forwardRef<102  React.ElementRef<typeof CommandPrimitive.Separator>,103  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>104>(({ className, ...props }, ref) => (105  <CommandPrimitive.Separator106    ref={ref}107    className={cn("-mx-1 h-px bg-stone-200 dark:bg-stone-800", className)}108    {...props}109  />110))111CommandSeparator.displayName = CommandPrimitive.Separator.displayName112 113const CommandItem = React.forwardRef<114  React.ElementRef<typeof CommandPrimitive.Item>,115  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>116>(({ className, ...props }, ref) => (117  <CommandPrimitive.Item118    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 aria-selected:bg-stone-100 aria-selected:text-stone-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-stone-800 dark:aria-selected:text-stone-50",121      className122    )}123    {...props}124  />125))126 127CommandItem.displayName = CommandPrimitive.Item.displayName128 129const CommandShortcut = ({130  className,131  ...props132}: React.HTMLAttributes<HTMLSpanElement>) => {133  return (134    <span135      className={cn(136        "ml-auto text-xs tracking-widest text-stone-500 dark:text-stone-400",137        className138      )}139      {...props}140    />141  )142}143CommandShortcut.displayName = "CommandShortcut"144 145export {146  Command,147  CommandDialog,148  CommandInput,149  CommandList,150  CommandEmpty,151  CommandGroup,152  CommandItem,153  CommandShortcut,154  CommandSeparator,155}156