c-command-4.tsx
"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
Command,
CommandDialog,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CommandShortcut,
} from "@/components/ui/command"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
export function Pattern() {
const [open, setOpen] = useState(false)
return (
<>
<Button onClick={() => setOpen(true)} variant="outline">
Open Command
</Button>
<CommandDialog open={open} onOpenChange={setOpen}>
<Command className="**:data-[selected=true]:bg-muted **:data-selected:bg-transparent">
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Navigation">
<CommandItem>
<IconPlaceholder
lucide="HouseIcon"
tabler="IconHome"
hugeicons="Home03Icon"
phosphor="HouseIcon"
remixicon="RiHome5Line"
/>
<span>Home</span>
<CommandShortcut>⌘H</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="InboxIcon"
tabler="IconInbox"
hugeicons="InboxIcon"
phosphor="TrayIcon"
remixicon="RiInboxLine"
/>
<span>Inbox</span>
<CommandShortcut>⌘I</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="FileTextIcon"
tabler="IconFileText"
hugeicons="File02Icon"
phosphor="FileTextIcon"
remixicon="RiFileTextLine"
/>
<span>Documents</span>
<CommandShortcut>⌘D</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="FolderIcon"
tabler="IconFolder"
hugeicons="FolderIcon"
phosphor="FolderIcon"
remixicon="RiFolderLine"
/>
<span>Folders</span>
<CommandShortcut>⌘F</CommandShortcut>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Actions">
<CommandItem>
<IconPlaceholder
lucide="PlusIcon"
tabler="IconPlus"
hugeicons="PlusSignIcon"
phosphor="PlusIcon"
remixicon="RiAddLine"
/>
<span>New File</span>
<CommandShortcut>⌘N</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="FolderPlusIcon"
tabler="IconFolderPlus"
hugeicons="FolderAddIcon"
phosphor="FolderPlusIcon"
remixicon="RiFolderAddLine"
/>
<span>New Folder</span>
<CommandShortcut>⇧⌘N</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="CopyIcon"
tabler="IconCopy"
hugeicons="CopyIcon"
phosphor="CopyIcon"
remixicon="RiFileCopyLine"
/>
<span>Copy</span>
<CommandShortcut>⌘C</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="ScissorsIcon"
tabler="IconScissors"
hugeicons="ScissorIcon"
phosphor="ScissorsIcon"
remixicon="RiScissorsLine"
/>
<span>Cut</span>
<CommandShortcut>⌘X</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="ClipboardIcon"
tabler="IconClipboard"
hugeicons="ClipboardIcon"
phosphor="ClipboardIcon"
remixicon="RiClipboardLine"
/>
<span>Paste</span>
<CommandShortcut>⌘V</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="TrashIcon"
tabler="IconTrash"
hugeicons="DeleteIcon"
phosphor="TrashIcon"
remixicon="RiDeleteBinLine"
/>
<span>Delete</span>
<CommandShortcut>⌫</CommandShortcut>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="View">
<CommandItem>
<IconPlaceholder
lucide="LayoutGridIcon"
tabler="IconLayoutGrid"
hugeicons="GridViewIcon"
phosphor="SquaresFourIcon"
remixicon="RiGalleryView2"
/>
<span>Grid View</span>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="ListIcon"
tabler="IconList"
hugeicons="Menu01Icon"
phosphor="ListIcon"
remixicon="RiListUnordered"
/>
<span>List View</span>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="ZoomInIcon"
tabler="IconZoomIn"
hugeicons="SearchAddIcon"
phosphor="MagnifyingGlassPlusIcon"
remixicon="RiZoomInLine"
/>
<span>Zoom In</span>
<CommandShortcut>⌘+</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="ZoomOutIcon"
tabler="IconZoomOut"
hugeicons="SearchMinusIcon"
phosphor="MagnifyingGlassMinusIcon"
remixicon="RiZoomOutLine"
/>
<span>Zoom Out</span>
<CommandShortcut>⌘-</CommandShortcut>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Account">
<CommandItem>
<IconPlaceholder
lucide="UserIcon"
tabler="IconUser"
hugeicons="UserIcon"
phosphor="UserIcon"
remixicon="RiUserLine"
/>
<span>Profile</span>
<CommandShortcut>⌘P</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="CreditCardIcon"
tabler="IconCreditCard"
hugeicons="CreditCardIcon"
phosphor="CreditCardIcon"
remixicon="RiBankCardLine"
/>
<span>Billing</span>
<CommandShortcut>⌘B</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="SettingsIcon"
tabler="IconSettings"
hugeicons="SettingsIcon"
phosphor="GearIcon"
remixicon="RiSettings3Line"
/>
<span>Settings</span>
<CommandShortcut>⌘S</CommandShortcut>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="BellIcon"
tabler="IconBell"
hugeicons="NotificationIcon"
phosphor="BellIcon"
remixicon="RiNotificationLine"
/>
<span>Notifications</span>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="HelpCircleIcon"
tabler="IconHelpCircle"
hugeicons="HelpCircleIcon"
phosphor="QuestionIcon"
remixicon="RiQuestionLine"
/>
<span>Help & Support</span>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Tools">
<CommandItem>
<IconPlaceholder
lucide="CalculatorIcon"
tabler="IconCalculator"
hugeicons="Calculator01Icon"
phosphor="CalculatorIcon"
remixicon="RiCalculatorLine"
/>
<span>Calculator</span>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="CalendarIcon"
tabler="IconCalendarEvent"
hugeicons="Calendar04Icon"
phosphor="CalendarBlankIcon"
remixicon="RiCalendarLine"
/>
<span>Calendar</span>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="ImageIcon"
tabler="IconPhoto"
hugeicons="ImageIcon"
phosphor="ImageIcon"
remixicon="RiImageLine"
/>
<span>Image Editor</span>
</CommandItem>
<CommandItem>
<IconPlaceholder
lucide="CodeIcon"
tabler="IconCode"
hugeicons="CodeSimpleIcon"
phosphor="CodeIcon"
remixicon="RiCodeLine"
/>
<span>Code Editor</span>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</CommandDialog>
</>
)
}
