Command

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";
import {
  Download,
  Layout,
  List,
  PlusCircle,
  Search,
  Upload,
} from "@mynaui/icons-react";

export default function Basic() {
  return (
    <Command className="w-[400px] rounded-lg border bg-background">
      <CommandInput placeholder="Search or type a command..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Actions">
          <CommandItem>
            <Layout className="size-4" stroke={2} />
            <span>Open Dashboard</span>
            <CommandShortcut>⌘D</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Search className="size-4" stroke={2} />
            <span>Search Bookmarks</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <PlusCircle className="size-4" stroke={2} />
            <span>Create New Bookmark</span>
            <CommandShortcut>⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Upload className="size-4" stroke={2} />
            <span>Import Bookmarks</span>
            <CommandShortcut>⌘I</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Download className="size-4" stroke={2} />
            <span>Export Bookmarks</span>
            <CommandShortcut>⌘E</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <List className="size-4" stroke={2} />
            <span>View All Bookmarks</span>
            <CommandShortcut>⌘V</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";
import {
  Bookmark,
  Download,
  Edit,
  Folder,
  FolderHeart,
  FolderMinus,
  FolderPlus,
  InfoCircle,
  Layout,
  Link,
  List,
  Logout,
  Moon,
  Pencil,
  PlusCircle,
  Search,
  Share,
  Star,
  Tag,
  Trash,
  Upload,
  User,
} from "@mynaui/icons-react";

export default function Dense() {
  return (
    <Command className="w-[300px] rounded-lg border bg-background">
      <CommandInput placeholder="Search or type a command..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Bookmarks">
          <CommandItem>
            <Edit className="size-4" stroke={2} />
            <span>Edit Bookmark</span>
          </CommandItem>
          <CommandItem>
            <Trash className="size-4" stroke={2} />
            <span>Delete Bookmark</span>
          </CommandItem>
          <CommandItem>
            <Folder className="size-4" stroke={2} />
            <span>Move to Folder</span>
          </CommandItem>
          <CommandItem>
            <Tag className="size-4" stroke={2} />
            <span>Tag Bookmark</span>
          </CommandItem>
          <CommandItem>
            <Star className="size-4" stroke={2} />
            <span>Favorite Bookmark</span>
          </CommandItem>
          <CommandItem>
            <Share className="size-4" stroke={2} />
            <span>Share Bookmark</span>
          </CommandItem>
          <CommandItem>
            <Link className="size-4" stroke={2} />
            <span>Open Bookmark</span>
          </CommandItem>
          <CommandItem>
            <InfoCircle className="size-4" stroke={2} />
            <span>View Bookmark Details</span>
          </CommandItem>
        </CommandGroup>
        <CommandGroup heading="Folders">
          <CommandItem>
            <FolderPlus className="size-4" stroke={2} />
            <span>Create Folder</span>
          </CommandItem>
          <CommandItem>
            <Pencil className="size-4" stroke={2} />
            <span>Rename Folder</span>
          </CommandItem>
          <CommandItem>
            <FolderMinus className="size-4" stroke={2} />
            <span>Delete Folder</span>
          </CommandItem>
          <CommandItem>
            <FolderHeart className="size-4" stroke={2} />
            <span>View Folder</span>
          </CommandItem>
        </CommandGroup>
        <CommandGroup heading="Tags">
          <CommandItem>
            <Bookmark className="size-4" stroke={2} />
            <span>Manage Tags</span>
          </CommandItem>
          <CommandItem>
            <Search className="size-4" stroke={2} />
            <span>Search by Tag</span>
          </CommandItem>
        </CommandGroup>
        <CommandGroup heading="Actions">
          <CommandItem>
            <Layout className="size-4" stroke={2} />
            <span>Open Dashboard</span>
            <CommandShortcut>⌘D</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Search className="size-4" stroke={2} />
            <span>Search Bookmarks</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <PlusCircle className="size-4" stroke={2} />
            <span>Create New Bookmark</span>
            <CommandShortcut>⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Upload className="size-4" stroke={2} />
            <span>Import Bookmarks</span>
            <CommandShortcut>⌘I</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Download className="size-4" stroke={2} />
            <span>Export Bookmarks</span>
            <CommandShortcut>⌘E</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <List className="size-4" stroke={2} />
            <span>View All Bookmarks</span>
            <CommandShortcut>⌘V</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandGroup heading="Settings">
          <CommandItem>
            <User className="size-4" stroke={2} />
            <span>Account Settings</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Logout className="size-4" stroke={2} />
            <span>Logout</span>
            <CommandShortcut>⌘Q</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Moon className="size-4" stroke={2} />
            <span>Theme Settings</span>
            <CommandShortcut>⌘T</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";
import {
  ArrowLeft,
  ArrowRight,
  Clipboard,
  Copy,
  Download,
  File,
  Folder,
  Home,
  Redo,
  Refresh,
  Search,
  Undo,
  Upload,
} from "@mynaui/icons-react";

export default function Simple() {
  return (
    <Command className="w-[400px] rounded-lg border bg-background">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="File">
          <CommandItem>
            <File className="size-4" stroke={2} />
            <span>New File</span>
            <CommandShortcut>⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Folder className="size-4" stroke={2} />
            <span>New Folder</span>
            <CommandShortcut>⇧⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Upload className="size-4" stroke={2} />
            <span>Upload File</span>
            <CommandShortcut>⌘U</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Download className="size-4" stroke={2} />
            <span>Download File</span>
            <CommandShortcut>⌘D</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Edit">
          <CommandItem>
            <Undo className="size-4" stroke={2} />
            <span>Undo</span>
            <CommandShortcut>⌘Z</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Redo className="size-4" stroke={2} />
            <span>Redo</span>
            <CommandShortcut>⇧⌘Z</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Search className="size-4" stroke={2} />
            <span>Find</span>
            <CommandShortcut>⌘F</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Copy className="size-4" stroke={2} />
            <span>Copy</span>
            <CommandShortcut>⌘C</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Clipboard className="size-4" stroke={2} />
            <span>Paste</span>
            <CommandShortcut>⌘V</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Navigation">
          <CommandItem>
            <ArrowLeft className="size-4" stroke={2} />
            <span>Go Back</span>
            <CommandShortcut>⌘[</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <ArrowRight className="size-4" stroke={2} />
            <span>Go Forward</span>
            <CommandShortcut>⌘]</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Home className="size-4" stroke={2} />
            <span>Go to Home</span>
            <CommandShortcut>⌘H</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Refresh className="size-4" stroke={2} />
            <span>Refresh</span>
            <CommandShortcut>⌘R</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";
import {
  Calendar,
  Cog,
  Home,
  Inbox,
  QuestionCircle,
  Search,
} from "@mynaui/icons-react";

export default function Navigation() {
  return (
    <Command className="bg-background w-[300px] rounded-lg border text-sm">
      <CommandInput placeholder="Go to..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Main">
          <CommandItem>
            <Home className="size-4" stroke={2} />
            <span>Home</span>
            <CommandShortcut>G H</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Calendar className="size-4" stroke={2} />
            <span>Calendar</span>
            <CommandShortcut>G C</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Inbox className="size-4" stroke={2} />
            <span>Inbox</span>
            <CommandShortcut>G I</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Utilities">
          <CommandItem>
            <Search className="size-4" stroke={2} />
            <span>Search Site</span>
            <CommandShortcut>⌘K</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Cog className="size-4" stroke={2} />
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <QuestionCircle className="size-4" stroke={2} />
            <span>Help</span>
            <CommandShortcut>?</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";
import {
  Forward,
  Pause,
  Play,
  Rewind,
  Stop,
  VolumeHigh,
  VolumeNone,
} from "@mynaui/icons-react";

export default function MediaControls() {
  return (
    <Command className="bg-background w-[300px] rounded-lg border text-sm">
      <CommandInput placeholder="Control media..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Playback">
          <CommandItem>
            <Play className="size-4" stroke={2} />
            <span>Play</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Pause className="size-4" stroke={2} />
            <span>Pause</span>
            <CommandShortcut>⌘U</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Stop className="size-4" stroke={2} />
            <span>Stop</span>
            <CommandShortcut>⌘.</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Rewind className="size-4" stroke={2} />
            <span>Rewind</span>
            <CommandShortcut>⌘⌫</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Forward className="size-4" stroke={2} />
            <span>Forward</span>
            <CommandShortcut>⌘⌦</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Volume">
          <CommandItem>
            <VolumeHigh className="size-4" stroke={2} />
            <span>Increase Volume</span>
            <CommandShortcut>⌘=</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <VolumeNone className="size-4" stroke={2} />
            <span>Mute</span>
            <CommandShortcut>⌘0</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";
import {
  TextAlignCenter,
  TextAlignLeft,
  TextAlignRight,
  TypeBold,
  TypeItalic,
  TypeUnderline,
} from "@mynaui/icons-react";

export default function Formatting() {
  return (
    <Command className="bg-background w-[300px] rounded-lg border text-sm">
      <CommandInput placeholder="Choose formatting..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Style">
          <CommandItem>
            <TypeBold className="size-4" stroke={2} />
            <span>Bold</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <TypeItalic className="size-4" stroke={2} />
            <span>Italic</span>
            <CommandShortcut>⌘I</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <TypeUnderline className="size-4" stroke={2} />
            <span>Underline</span>
            <CommandShortcut>⌘U</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Alignment">
          <CommandItem>
            <TextAlignLeft className="size-4" stroke={2} />
            <span>Left Align</span>
            <CommandShortcut>⌘L</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <TextAlignCenter className="size-4" stroke={2} />
            <span>Center Align</span>
            <CommandShortcut>⌘E</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <TextAlignRight className="size-4" stroke={2} />
            <span>Right Align</span>
            <CommandShortcut>⌘R</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}