{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-autocomplete-9","type":"registry:block","title":"With search results","description":"With search results","dependencies":["@base-ui/react"],"registryDependencies":["@reui/autocomplete","avatar"],"files":[{"path":"c-autocomplete-9.tsx","type":"registry:block","content":"\"use client\"\n\nimport { ReactNode, useEffect, useState } from \"react\"\nimport {\n  Autocomplete,\n  AutocompleteContent,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteStatus,\n} from \"@/components/reui/autocomplete\"\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  const [searchValue, setSearchValue] = useState(\"\")\n  const [isLoading, setIsLoading] = useState(false)\n  const [searchResults, setSearchResults] = useState<Developer[]>([])\n  const [error, setError] = useState<string | null>(null)\n\n  const { contains } = AutocompletePrimitive.useFilter({ sensitivity: \"base\" })\n\n  useEffect(() => {\n    if (!searchValue) {\n      setSearchResults([])\n      setIsLoading(false)\n      return undefined\n    }\n\n    setIsLoading(true)\n    setError(null)\n\n    let ignore = false\n\n    async function fetchDevelopers() {\n      try {\n        const results = await searchDevelopers(searchValue, contains)\n        if (!ignore) {\n          setSearchResults(results)\n        }\n      } catch {\n        if (!ignore) {\n          setError(\"Failed to fetch developers. Please try again.\")\n          setSearchResults([])\n        }\n      } finally {\n        if (!ignore) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    const timeoutId = setTimeout(fetchDevelopers, 300)\n\n    return () => {\n      clearTimeout(timeoutId)\n      ignore = true\n    }\n  }, [searchValue, contains])\n\n  let status: ReactNode = \"\"\n\n  if (isLoading) {\n    status = (\n      <div className=\"flex items-center gap-2\">\n        <IconPlaceholder\n          lucide=\"LoaderCircleIcon\"\n          tabler=\"IconLoader2\"\n          hugeicons=\"Loading02Icon\"\n          phosphor=\"CircleNotchIcon\"\n          remixicon=\"RiLoader4Line\"\n          className=\"size-4 animate-spin\"\n          aria-hidden\n        />\n        Searching developers...\n      </div>\n    )\n  } else if (error) {\n    status = error\n  } else if (searchResults.length === 0 && searchValue) {\n    status = `No developers found for \"${searchValue}\"`\n  } else if (searchResults.length > 0) {\n    status = `${searchResults.length} developer${searchResults.length === 1 ? \"\" : \"s\"} found`\n  } else if (!searchValue) {\n    status = \"Start typing to search developers...\"\n  }\n\n  const shouldRenderPopup = searchValue !== \"\"\n\n  return (\n    <div className=\"w-full max-w-xs\">\n      <Autocomplete\n        items={searchResults}\n        value={searchValue}\n        onValueChange={setSearchValue}\n        itemToStringValue={(item: unknown) => (item as Developer).name}\n        filter={null}\n      >\n        <AutocompleteInput\n          placeholder=\"e.g. John Smith, React, San Francisco\"\n          showTrigger\n          showClear\n        />\n        {shouldRenderPopup && (\n          <AutocompleteContent>\n            <AutocompleteStatus>{status}</AutocompleteStatus>\n            <AutocompleteList>\n              {(developer: Developer) => (\n                <AutocompleteItem\n                  key={developer.id}\n                  value={developer}\n                  className=\"rounded-lg\"\n                >\n                  <div className=\"flex items-center gap-2.5 truncate\">\n                    <Avatar className=\"size-9\">\n                      <AvatarImage\n                        src={developer.avatar}\n                        alt={developer.name}\n                      />\n                      <AvatarFallback>\n                        {developer.name\n                          .split(\" \")\n                          .map((n) => n[0])\n                          .join(\"\")}\n                      </AvatarFallback>\n                    </Avatar>\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"truncate font-medium\">\n                        {developer.name}\n                      </div>\n                      <div className=\"text-muted-foreground truncate text-sm\">\n                        {developer.role} • {developer.location}\n                      </div>\n                    </div>\n                  </div>\n                </AutocompleteItem>\n              )}\n            </AutocompleteList>\n          </AutocompleteContent>\n        )}\n      </Autocomplete>\n    </div>\n  )\n}\n\nasync function searchDevelopers(\n  query: string,\n  filter: (item: string, query: string) => boolean\n): Promise<Developer[]> {\n  // Simulate network delay\n  await new Promise((resolve) => {\n    setTimeout(resolve, Math.random() * 800 + 200)\n  })\n\n  // Simulate occasional network errors (2% chance)\n  if (Math.random() < 0.02 || query === \"error\") {\n    throw new Error(\"Network error\")\n  }\n\n  return topDevelopers.filter(\n    (developer) =>\n      filter(developer.name, query) ||\n      filter(developer.role, query) ||\n      filter(developer.location, query) ||\n      developer.skills.some((skill) => filter(skill, query))\n  )\n}\n\ninterface Developer {\n  id: string\n  name: string\n  role: string\n  location: string\n  skills: string[]\n  experience: number\n  rating: number\n  avatar: string\n}\n\nconst topDevelopers: Developer[] = [\n  {\n    id: \"1\",\n    name: \"Alex Chen\",\n    role: \"Senior Full-Stack Developer\",\n    location: \"San Francisco, CA\",\n    skills: [\"React\", \"Node.js\", \"TypeScript\", \"AWS\", \"Docker\"],\n    experience: 8,\n    rating: 4.9,\n    avatar: \"https://randomuser.me/api/portraits/men/1.jpg\",\n  },\n  {\n    id: \"2\",\n    name: \"Sarah Johnson\",\n    role: \"Frontend Architect\",\n    location: \"New York, NY\",\n    skills: [\"Vue.js\", \"JavaScript\", \"CSS\", \"Webpack\", \"Figma\"],\n    experience: 10,\n    rating: 4.8,\n    avatar: \"https://randomuser.me/api/portraits/women/2.jpg\",\n  },\n  {\n    id: \"3\",\n    name: \"Michael Rodriguez\",\n    role: \"Backend Engineer\",\n    location: \"Austin, TX\",\n    skills: [\"Python\", \"Django\", \"PostgreSQL\", \"Redis\", \"Kubernetes\"],\n    experience: 6,\n    rating: 4.7,\n    avatar: \"https://randomuser.me/api/portraits/men/3.jpg\",\n  },\n  {\n    id: \"4\",\n    name: \"Emily Wang\",\n    role: \"DevOps Engineer\",\n    location: \"Seattle, WA\",\n    skills: [\"AWS\", \"Terraform\", \"Jenkins\", \"Docker\", \"Linux\"],\n    experience: 7,\n    rating: 4.9,\n    avatar: \"https://randomuser.me/api/portraits/women/4.jpg\",\n  },\n  {\n    id: \"5\",\n    name: \"David Kim\",\n    role: \"Mobile Developer\",\n    location: \"Los Angeles, CA\",\n    skills: [\"React Native\", \"Swift\", \"Kotlin\", \"Firebase\", \"GraphQL\"],\n    experience: 5,\n    rating: 4.6,\n    avatar: \"https://randomuser.me/api/portraits/men/5.jpg\",\n  },\n  {\n    id: \"6\",\n    name: \"Lisa Thompson\",\n    role: \"Data Engineer\",\n    location: \"Boston, MA\",\n    skills: [\"Python\", \"Spark\", \"Airflow\", \"Snowflake\", \"dbt\"],\n    experience: 9,\n    rating: 4.8,\n    avatar: \"https://randomuser.me/api/portraits/women/6.jpg\",\n  },\n  {\n    id: \"7\",\n    name: \"James Wilson\",\n    role: \"Cloud Solutions Architect\",\n    location: \"Chicago, IL\",\n    skills: [\"AWS\", \"Azure\", \"Terraform\", \"Kubernetes\", \"Microservices\"],\n    experience: 12,\n    rating: 4.9,\n    avatar: \"https://randomuser.me/api/portraits/men/7.jpg\",\n  },\n  {\n    id: \"8\",\n    name: \"Maria Garcia\",\n    role: \"UI/UX Developer\",\n    location: \"Miami, FL\",\n    skills: [\"React\", \"Figma\", \"CSS-in-JS\", \"Storybook\", \"Accessibility\"],\n    experience: 4,\n    rating: 4.5,\n    avatar: \"https://randomuser.me/api/portraits/women/8.jpg\",\n  },\n  {\n    id: \"9\",\n    name: \"Robert Taylor\",\n    role: \"Machine Learning Engineer\",\n    location: \"Denver, CO\",\n    skills: [\"Python\", \"TensorFlow\", \"PyTorch\", \"MLOps\", \"Docker\"],\n    experience: 6,\n    rating: 4.7,\n    avatar: \"https://randomuser.me/api/portraits/men/9.jpg\",\n  },\n  {\n    id: \"10\",\n    name: \"Jennifer Lee\",\n    role: \"Blockchain Developer\",\n    location: \"San Diego, CA\",\n    skills: [\"Solidity\", \"Web3.js\", \"Ethereum\", \"Smart Contracts\", \"Rust\"],\n    experience: 5,\n    rating: 4.6,\n    avatar: \"https://randomuser.me/api/portraits/women/10.jpg\",\n  },\n  {\n    id: \"11\",\n    name: \"Christopher Brown\",\n    role: \"Security Engineer\",\n    location: \"Portland, OR\",\n    skills: [\"Cybersecurity\", \"Penetration Testing\", \"OWASP\", \"SIEM\", \"Python\"],\n    experience: 8,\n    rating: 4.8,\n    avatar: \"https://randomuser.me/api/portraits/men/11.jpg\",\n  },\n  {\n    id: \"12\",\n    name: \"Amanda Davis\",\n    role: \"Game Developer\",\n    location: \"Orlando, FL\",\n    skills: [\"Unity\", \"C#\", \"Unreal Engine\", \"3D Modeling\", \"VR/AR\"],\n    experience: 7,\n    rating: 4.7,\n    avatar: \"https://randomuser.me/api/portraits/women/12.jpg\",\n  },\n  {\n    id: \"13\",\n    name: \"Kevin Zhang\",\n    role: \"AI Research Engineer\",\n    location: \"Palo Alto, CA\",\n    skills: [\"Python\", \"PyTorch\", \"Transformers\", \"NLP\", \"Computer Vision\"],\n    experience: 6,\n    rating: 4.9,\n    avatar: \"https://randomuser.me/api/portraits/men/13.jpg\",\n  },\n  {\n    id: \"14\",\n    name: \"Rachel Green\",\n    role: \"QA Automation Engineer\",\n    location: \"Phoenix, AZ\",\n    skills: [\"Selenium\", \"Cypress\", \"Jest\", \"Python\", \"Test Automation\"],\n    experience: 5,\n    rating: 4.6,\n    avatar: \"https://randomuser.me/api/portraits/women/14.jpg\",\n  },\n  {\n    id: \"15\",\n    name: \"Daniel Martinez\",\n    role: \"System Administrator\",\n    location: \"Dallas, TX\",\n    skills: [\n      \"Linux\",\n      \"Windows Server\",\n      \"Active Directory\",\n      \"PowerShell\",\n      \"VMware\",\n    ],\n    experience: 10,\n    rating: 4.8,\n    avatar: \"https://randomuser.me/api/portraits/men/15.jpg\",\n  },\n  {\n    id: \"16\",\n    name: \"Sophie Anderson\",\n    role: \"Product Manager\",\n    location: \"San Jose, CA\",\n    skills: [\n      \"Product Strategy\",\n      \"Agile\",\n      \"Analytics\",\n      \"User Research\",\n      \"Figma\",\n    ],\n    experience: 8,\n    rating: 4.7,\n    avatar: \"https://randomuser.me/api/portraits/women/16.jpg\",\n  },\n  {\n    id: \"17\",\n    name: \"Mark Thompson\",\n    role: \"Database Administrator\",\n    location: \"Atlanta, GA\",\n    skills: [\"PostgreSQL\", \"MySQL\", \"MongoDB\", \"Redis\", \"Performance Tuning\"],\n    experience: 11,\n    rating: 4.9,\n    avatar: \"https://randomuser.me/api/portraits/men/17.jpg\",\n  },\n  {\n    id: \"18\",\n    name: \"Jessica White\",\n    role: \"Technical Writer\",\n    location: \"Raleigh, NC\",\n    skills: [\n      \"Technical Writing\",\n      \"Markdown\",\n      \"API Documentation\",\n      \"Git\",\n      \"Confluence\",\n    ],\n    experience: 6,\n    rating: 4.5,\n    avatar: \"https://randomuser.me/api/portraits/women/18.jpg\",\n  },\n  {\n    id: \"19\",\n    name: \"Andrew Clark\",\n    role: \"Site Reliability Engineer\",\n    location: \"Nashville, TN\",\n    skills: [\n      \"Monitoring\",\n      \"Incident Response\",\n      \"Python\",\n      \"Terraform\",\n      \"Kubernetes\",\n    ],\n    experience: 7,\n    rating: 4.8,\n    avatar: \"https://randomuser.me/api/portraits/men/19.jpg\",\n  },\n  {\n    id: \"20\",\n    name: \"Nicole Taylor\",\n    role: \"Frontend Developer\",\n    location: \"Minneapolis, MN\",\n    skills: [\"Angular\", \"TypeScript\", \"RxJS\", \"SCSS\", \"Jest\"],\n    experience: 4,\n    rating: 4.6,\n    avatar: \"https://randomuser.me/api/portraits/women/20.jpg\",\n  },\n  {\n    id: \"21\",\n    name: \"Ryan Murphy\",\n    role: \"Backend Developer\",\n    location: \"Kansas City, MO\",\n    skills: [\"Java\", \"Spring Boot\", \"Microservices\", \"MongoDB\", \"Docker\"],\n    experience: 6,\n    rating: 4.7,\n    avatar: \"https://randomuser.me/api/portraits/men/21.jpg\",\n  },\n  {\n    id: \"22\",\n    name: \"Stephanie Lewis\",\n    role: \"Full-Stack Developer\",\n    location: \"Salt Lake City, UT\",\n    skills: [\"React\", \"Node.js\", \"GraphQL\", \"PostgreSQL\", \"AWS\"],\n    experience: 5,\n    rating: 4.6,\n    avatar: \"https://randomuser.me/api/portraits/women/22.jpg\",\n  },\n  {\n    id: \"23\",\n    name: \"Brandon Wright\",\n    role: \"Cloud Engineer\",\n    location: \"Las Vegas, NV\",\n    skills: [\"AWS\", \"Terraform\", \"Docker\", \"Kubernetes\", \"Python\"],\n    experience: 8,\n    rating: 4.8,\n    avatar: \"https://randomuser.me/api/portraits/men/23.jpg\",\n  },\n  {\n    id: \"24\",\n    name: \"Ashley Hall\",\n    role: \"DevOps Engineer\",\n    location: \"Columbus, OH\",\n    skills: [\"CI/CD\", \"Jenkins\", \"GitLab\", \"Docker\", \"AWS\"],\n    experience: 6,\n    rating: 4.7,\n    avatar: \"https://randomuser.me/api/portraits/women/24.jpg\",\n  },\n  {\n    id: \"25\",\n    name: \"Tyler Young\",\n    role: \"Mobile App Developer\",\n    location: \"Tampa, FL\",\n    skills: [\"Flutter\", \"Dart\", \"Firebase\", \"REST APIs\", \"Git\"],\n    experience: 4,\n    rating: 4.5,\n    avatar: \"https://randomuser.me/api/portraits/men/25.jpg\",\n  },\n]","target":"components/examples/c-autocomplete-9.tsx"}],"meta":{"order":9,"label":"Search Results"}}