Skip to content

Commit

Permalink
⭐ feat: add command and dialog ui component for popovercontent in sid…
Browse files Browse the repository at this point in the history 
…ebar menu option.
  • Loading branch information
@yashdev9274
yashdev9274 committed Jun 12, 2024
1 parent 020ef24 commit 6115d55
Show file tree
Hide file tree
Showing 5 changed files with 304 additions and 162 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@uploadthing/react": "^6.2.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"cmdk": "^1.0.0",
"framer-motion": "^11.1.1",
"install": "^0.13.0",
"lucide-react": "^0.325.0",
Expand Down
18 changes: 18 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions src/components/sidebar/menu-options.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import { AspectRatio } from '../ui/aspect-ratio'
import Image from 'next/image'
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
import Compass from '../icons/compass'
// import { Command } from '../ui/command'
import { Command } from '../ui/command'


type Props = {

Expand Down Expand Up @@ -111,9 +112,9 @@ const MenuOptions = ({
</Button>
</PopoverTrigger>
<PopoverContent className="w-80 h-80 mt-4 z-[200]">
{/* <Command>
<Command>

</Command> */}
</Command>

</PopoverContent>
</Popover>
Expand Down
318 changes: 159 additions & 159 deletions src/components/ui/command.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,159 +1,159 @@
// 'use client'

// import * as React from 'react'
// import { type DialogProps } from '@radix-ui/react-dialog'
// import { Command as CommandPrimitive } from 'cmdk'
// import { Search } from 'lucide-react'

// import { cn } from '@/lib/utils'
// import { Dialog, DialogContent } from '@/components/ui/dialog'

// const Command = React.forwardRef<
// React.ElementRef<typeof CommandPrimitive>,
// React.ComponentPropsWithoutRef<typeof CommandPrimitive>
// >(({ className, ...props }, ref) => (
// <CommandPrimitive
// ref={ref}
// className={cn(
// 'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
// className
// )}
// {...props}
// />
// ))
// Command.displayName = CommandPrimitive.displayName

// interface CommandDialogProps extends DialogProps { }

// const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
// return (
// <Dialog {...props}>
// <DialogContent className="overflow-hidden p-0 shadow-lg">
// <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">
// {children}
// </Command>
// </DialogContent>
// </Dialog>
// )
// }

// const CommandInput = React.forwardRef<
// React.ElementRef<typeof CommandPrimitive.Input>,
// React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
// >(({ className, ...props }, ref) => (
// <div
// className="flex items-center border-b dark:bg-muted rounded-md px-3"
// cmdk-input-wrapper=""
// >
// <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
// <CommandPrimitive.Input
// ref={ref}
// className={cn(
// 'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
// className
// )}
// {...props}
// />
// </div>
// ))

// CommandInput.displayName = CommandPrimitive.Input.displayName

// const CommandList = React.forwardRef<
// React.ElementRef<typeof CommandPrimitive.List>,
// React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
// >(({ className, ...props }, ref) => (
// <CommandPrimitive.List
// ref={ref}
// className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
// {...props}
// />
// ))

// CommandList.displayName = CommandPrimitive.List.displayName

// const CommandEmpty = React.forwardRef<
// React.ElementRef<typeof CommandPrimitive.Empty>,
// React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
// >((props, ref) => (
// <CommandPrimitive.Empty
// ref={ref}
// className="py-6 text-center text-sm"
// {...props}
// />
// ))

// CommandEmpty.displayName = CommandPrimitive.Empty.displayName

// const CommandGroup = React.forwardRef<
// React.ElementRef<typeof CommandPrimitive.Group>,
// React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
// >(({ className, ...props }, ref) => (
// <CommandPrimitive.Group
// ref={ref}
// className={cn(
// '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',
// className
// )}
// {...props}
// />
// ))

// CommandGroup.displayName = CommandPrimitive.Group.displayName

// const CommandSeparator = React.forwardRef<
// React.ElementRef<typeof CommandPrimitive.Separator>,
// React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
// >(({ className, ...props }, ref) => (
// <CommandPrimitive.Separator
// ref={ref}
// className={cn('-mx-1 h-px bg-border', className)}
// {...props}
// />
// ))
// CommandSeparator.displayName = CommandPrimitive.Separator.displayName

// //CHANGED:
// const CommandItem = React.forwardRef<
// React.ElementRef<typeof CommandPrimitive.Item>,
// React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
// >(({ className, ...props }, ref) => (
// <CommandPrimitive.Item
// ref={ref}
// className={cn(
// 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-primary aria-selected:text-white aria-selected:font-bold data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
// className
// )}
// {...props}
// />
// ))

// CommandItem.displayName = CommandPrimitive.Item.displayName

// const CommandShortcut = ({
// className,
// ...props
// }: React.HTMLAttributes<HTMLSpanElement>) => {
// return (
// <span
// className={cn(
// 'ml-auto text-xs tracking-widest text-muted-foreground',
// className
// )}
// {...props}
// />
// )
// }
// CommandShortcut.displayName = 'CommandShortcut'

// export {
// Command,
// CommandDialog,
// CommandInput,
// CommandList,
// CommandEmpty,
// CommandGroup,
// CommandItem,
// CommandShortcut,
// CommandSeparator,
// }
'use client'

import * as React from 'react'
import { type DialogProps } from '@radix-ui/react-dialog'
import { Command as CommandPrimitive } from 'cmdk'
import { Search } from 'lucide-react'

import { cn } from '@/lib/utils'
import { Dialog, DialogContent } from '@/components/ui/dialog'

const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
<CommandPrimitive
ref={ref}
className={cn(
'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
className
)}
{...props}
/>
))
Command.displayName = CommandPrimitive.displayName

interface CommandDialogProps extends DialogProps { }

const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0 shadow-lg">
<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">
{children}
</Command>
</DialogContent>
</Dialog>
)
}

const CommandInput = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Input>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
<div
className="flex items-center border-b dark:bg-muted rounded-md px-3"
cmdk-input-wrapper=""
>
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
ref={ref}
className={cn(
'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
className
)}
{...props}
/>
</div>
))

CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.List>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
<CommandPrimitive.List
ref={ref}
className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
{...props}
/>
))

CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Empty>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
<CommandPrimitive.Empty
ref={ref}
className="py-6 text-center text-sm"
{...props}
/>
))

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Group>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Group
ref={ref}
className={cn(
'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',
className
)}
{...props}
/>
))

CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Separator
ref={ref}
className={cn('-mx-1 h-px bg-border', className)}
{...props}
/>
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

//CHANGED:
const CommandItem = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-primary aria-selected:text-white aria-selected:font-bold data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className
)}
{...props}
/>
))

CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn(
'ml-auto text-xs tracking-widest text-muted-foreground',
className
)}
{...props}
/>
)
}
CommandShortcut.displayName = 'CommandShortcut'

export {
Command,
CommandDialog,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandShortcut,
CommandSeparator,
}
Loading

0 comments on commit 6115d55

Please sign in to comment.