{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command7",
  "title": "Command",
  "description": "Command built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/command/7/index.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList\n} from \"@/components/ui/command\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\nimport { FileIcon, TerminalIcon, UsersIcon, Sparkles } from \"lucide-react\";\n\ntype FilterType = \"all\" | \"files\" | \"people\" | \"commands\";\n\nconst aiPrompts = [\n  { name: \"Generate today sales summary\", icon: Sparkles },\n  { name: \"Create action items based on today's forecast\", icon: Sparkles }\n];\n\nconst recentSearches = [\n  { name: \"My Inbox\", subtitle: \"Mail\", icon: \"📥\" },\n  { name: \"Add new task\", subtitle: \"Personal Draft\", icon: \"➕\" },\n  { name: \"Data Analyst Team\", subtitle: \"Group Chat\", icon: \"👥\" }\n];\n\nconst files = [\n  { name: \"document.pdf\", type: \"PDF\" },\n  { name: \"spreadsheet.xlsx\", type: \"Excel\" },\n  { name: \"presentation.pptx\", type: \"PowerPoint\" },\n  { name: \"image.jpg\", type: \"Image\" }\n];\n\nconst commands = [\n  { name: \"New File\", shortcut: \"⌘N\" },\n  { name: \"Save\", shortcut: \"⌘S\" },\n  { name: \"Search\", shortcut: \"⌘K\" },\n  { name: \"Settings\", shortcut: \"⌘,\" }\n];\n\nconst people = [\n  { name: \"John Doe\", email: \"john@example.com\" },\n  { name: \"Sarah Miller\", email: \"sarah@example.com\" },\n  { name: \"Mike Johnson\", email: \"mike@example.com\" },\n  { name: \"Emma Wilson\", email: \"emma@example.com\" }\n];\n\nexport default function CommandComponent() {\n  const [filter, setFilter] = useState<FilterType>(\"all\");\n  const [search, setSearch] = useState(\"\");\n\n  const getAllItems = () => {\n    return [\n      ...files.map((item) => ({ ...item, category: \"files\" })),\n      ...people.map((item) => ({ ...item, category: \"people\" })),\n      ...commands.map((item) => ({ ...item, category: \"commands\" }))\n    ];\n  };\n\n  const getFilteredItems = () => {\n    if (filter === \"all\") {\n      const all = getAllItems();\n      if (!search) return all;\n      return all.filter(\n        (item: any) =>\n          item.name.toLowerCase().includes(search.toLowerCase()) ||\n          item.email?.toLowerCase().includes(search.toLowerCase())\n      );\n    }\n\n    const items = {\n      files,\n      people,\n      commands\n    }[filter];\n\n    if (!search) return items;\n\n    return items.filter(\n      (item: any) =>\n        item.name.toLowerCase().includes(search.toLowerCase()) ||\n        item.email?.toLowerCase().includes(search.toLowerCase())\n    );\n  };\n\n  const renderItems = () => {\n    const items = getFilteredItems();\n\n    if (filter === \"all\" && !search) {\n      return (\n        <>\n          <CommandGroup heading=\"AI Prompts\">\n            {aiPrompts.map((item, index) => (\n              <CommandItem key={index} onSelect={() => console.log(`AI: ${item.name}`)}>\n                <item.icon className=\"text-purple-500\" />\n                <span>{item.name}</span>\n              </CommandItem>\n            ))}\n          </CommandGroup>\n          <CommandGroup heading=\"Recent Searches\">\n            {recentSearches.map((item, index) => (\n              <CommandItem key={index} onSelect={() => console.log(`Recent: ${item.name}`)}>\n                <span>{item.icon}</span>\n                <div className=\"flex flex-col\">\n                  <span>{item.name}</span>\n                  <span className=\"text-muted-foreground text-xs\">{item.subtitle}</span>\n                </div>\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        </>\n      );\n    }\n\n    switch (filter) {\n      case \"files\":\n        return items.map((item: any, index: number) => (\n          <CommandItem key={index} onSelect={() => console.log(`Open: ${item.name}`)}>\n            <FileIcon />\n            <span>{item.name}</span>\n            <span className=\"text-muted-foreground ml-auto text-xs\">{item.type}</span>\n          </CommandItem>\n        ));\n      case \"commands\":\n        return items.map((item: any, index: number) => (\n          <CommandItem key={index} onSelect={() => console.log(`Run: ${item.name}`)}>\n            <TerminalIcon />\n            <span>{item.name}</span>\n            <span className=\"text-muted-foreground ml-auto text-xs\">{item.shortcut}</span>\n          </CommandItem>\n        ));\n      case \"people\":\n        return items.map((item: any, index: number) => (\n          <CommandItem key={index} onSelect={() => console.log(`Contact: ${item.name}`)}>\n            <UsersIcon />\n            <div className=\"flex flex-col\">\n              <span>{item.name}</span>\n              <span className=\"text-muted-foreground text-xs\">{item.email}</span>\n            </div>\n          </CommandItem>\n        ));\n      case \"all\":\n        return items.map((item: any, index: number) => {\n          if (item.category === \"files\") {\n            return (\n              <CommandItem key={index} onSelect={() => console.log(`Open: ${item.name}`)}>\n                <FileIcon />\n                <span>{item.name}</span>\n                <span className=\"text-muted-foreground ml-auto text-xs\">{item.type}</span>\n              </CommandItem>\n            );\n          }\n          if (item.category === \"people\") {\n            return (\n              <CommandItem key={index} onSelect={() => console.log(`Contact: ${item.name}`)}>\n                <UsersIcon />\n                <div className=\"flex flex-col\">\n                  <span>{item.name}</span>\n                  <span className=\"text-muted-foreground text-xs\">{item.email}</span>\n                </div>\n              </CommandItem>\n            );\n          }\n          if (item.category === \"commands\") {\n            return (\n              <CommandItem key={index} onSelect={() => console.log(`Run: ${item.name}`)}>\n                <TerminalIcon />\n                <span>{item.name}</span>\n                <span className=\"text-muted-foreground ml-auto text-xs\">{item.shortcut}</span>\n              </CommandItem>\n            );\n          }\n          return null;\n        });\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <div className=\"w-full max-w-md rounded-lg border shadow-md\">\n      <Command>\n        <CommandInput\n          placeholder=\"Search or type a command...\"\n          value={search}\n          onValueChange={setSearch}\n        />\n        <div className=\"border-b px-3 py-2\">\n          <ToggleGroup\n            type=\"single\"\n            value={filter}\n            onValueChange={(value) => value && setFilter(value as FilterType)}\n            variant=\"outline\"\n            className=\"w-full justify-start\">\n            <ToggleGroupItem value=\"all\" aria-label=\"All\">\n              All\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"files\" aria-label=\"Files\">\n              Files\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"people\" aria-label=\"People\">\n              Peoples\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"commands\" aria-label=\"Commands\">\n              Commands\n            </ToggleGroupItem>\n          </ToggleGroup>\n        </div>\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          {filter === \"all\" && !search ? (\n            renderItems()\n          ) : (\n            <CommandGroup heading={filter.charAt(0).toUpperCase() + filter.slice(1)}>\n              {renderItems()}\n            </CommandGroup>\n          )}\n        </CommandList>\n      </Command>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/command7.tsx"
    }
  ],
  "type": "registry:component"
}