{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command8",
  "title": "Command",
  "description": "Command built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/command/8/index.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\";\nimport { Button } from \"@/components/ui/button\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport {\n  Sparkles,\n  UserIcon,\n  UserMinusIcon,\n  CheckCircleIcon,\n  SearchIcon,\n  FilterIcon,\n  XIcon,\n} from \"lucide-react\";\n\nconst actions = [\n  {\n    name: \"Assign to Simon Prusin\",\n    icon: Avatar,\n    avatar: \"https://i.pravatar.cc/150?img=1\",\n    shortcut: null,\n  },\n  {\n    name: \"Assign to...\",\n    icon: UserIcon,\n    shortcut: \"A\",\n  },\n  {\n    name: \"Un-assign\",\n    icon: UserMinusIcon,\n    shortcut: \"U\",\n  },\n];\n\nconst keywordResults = [\n  {\n    name: \"Simon Prusin\",\n    subtitle: \"simonprusin@gmail.com\",\n    icon: Avatar,\n    avatar: \"https://i.pravatar.cc/150?img=1\",\n  },\n  {\n    name: \"Sign up flow\",\n    subtitle: \"Notion Page\",\n    icon: \"N\",\n    type: \"notion\",\n  },\n  {\n    name: \"Sign up flow Design\",\n    subtitle: \"MSP-10\",\n    icon: CheckCircleIcon,\n    type: \"task\",\n  },\n  {\n    name: \"Sign up Error\",\n    subtitle: \"MSD_10\",\n    icon: CheckCircleIcon,\n    type: \"task\",\n  },\n];\n\nexport default function CommandComponent() {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n\n  const filteredActions = actions.filter((action) =>\n    action.name.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const filteredKeywords = keywordResults.filter(\n    (item) =>\n      item.name.toLowerCase().includes(search.toLowerCase()) ||\n      item.subtitle?.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  return (\n    <div className=\"w-full max-w-md rounded-lg border shadow-md\">\n      <Command>\n        <div className=\"flex items-center gap-2 border-b px-3\">\n          <div className=\"flex-1\">\n            <CommandInput\n              placeholder=\"Search or type a command...\"\n              value={search}\n              onValueChange={setSearch}\n              className=\"border-0 shadow-none focus-visible:ring-0\"\n            />\n          </div>\n          <FilterIcon className=\"text-muted-foreground h-4 w-4\" />\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-6 w-6\"\n            onClick={() => setOpen(false)}\n          >\n            <XIcon className=\"h-4 w-4\" />\n          </Button>\n        </div>\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          {!search && (\n            <CommandGroup>\n              <CommandItem onSelect={() => console.log(\"Smart search\")}>\n                <Sparkles className=\"h-4 w-4 text-purple-500\" />\n                <span>Smart search</span>\n                <CommandShortcut>⌘M</CommandShortcut>\n              </CommandItem>\n            </CommandGroup>\n          )}\n          {filteredActions.length > 0 && (\n            <CommandGroup heading=\"Actions\">\n              {filteredActions.map((action, index) => (\n                <CommandItem\n                  key={index}\n                  onSelect={() => {\n                    console.log(`Action: ${action.name}`);\n                    setOpen(false);\n                  }}\n                >\n                  {action.avatar ? (\n                    <Avatar className=\"h-5 w-5\">\n                      <AvatarImage src={action.avatar} alt={action.name} />\n                      <AvatarFallback>SP</AvatarFallback>\n                    </Avatar>\n                  ) : (\n                    <action.icon className=\"h-4 w-4\" />\n                  )}\n                  <span>{action.name}</span>\n                  {action.shortcut && (\n                    <CommandShortcut>{action.shortcut}</CommandShortcut>\n                  )}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          )}\n          {filteredKeywords.length > 0 && (\n            <CommandGroup heading=\"Keyword\">\n              {filteredKeywords.map((item, index) => (\n                <CommandItem\n                  key={index}\n                  onSelect={() => {\n                    console.log(`Selected: ${item.name}`);\n                    setOpen(false);\n                  }}\n                >\n                  {item.avatar ? (\n                    <Avatar className=\"h-5 w-5\">\n                      <AvatarImage src={item.avatar} alt={item.name} />\n                      <AvatarFallback>\n                        {item.name\n                          .split(\" \")\n                          .map((n) => n[0])\n                          .join(\"\")}\n                      </AvatarFallback>\n                    </Avatar>\n                  ) : item.type === \"notion\" ? (\n                    <div className=\"flex h-5 w-5 items-center justify-center rounded bg-white text-xs font-bold text-black\">\n                      {item.icon && <item.icon />}\n                    </div>\n                  ) : (\n                    <item.icon className=\"h-4 w-4 text-green-500\" />\n                  )}\n                  <div className=\"flex flex-col\">\n                    <span>{item.name}</span>\n                    {item.subtitle && (\n                      <span className=\"text-muted-foreground text-xs\">\n                        {item.subtitle}\n                      </span>\n                    )}\n                  </div>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          )}\n        </CommandList>\n        <div className=\"border-t px-3 py-2\">\n          <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <div className=\"flex items-center gap-4\">\n              <span>↑↓ Navigate</span>\n              <span>← Confirm</span>\n            </div>\n            <span>esc Close</span>\n          </div>\n        </div>\n      </Command>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/command8.tsx"
    }
  ],
  "type": "registry:component"
}