{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multiple-selector-manually-controlled",
  "title": "Multiple Selector Manually Controlled",
  "description": "component for the Multiple Selector Manually Controlled",
  "registryDependencies": [
    "@spectrumui/multiple-selector-dependencies",
    "@spectrumui/loading-button-dependencies"
  ],
  "files": [
    {
      "path": "app/registry/multiple-selector/usage/multiple-selector-manually-controlled.tsx",
      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport MultipleSelector, {\n  Option,\n} from \"@/app/registry/spectrumui/multiple-selector-dependencies\";\n\nimport { LoadingButton } from \"@/app/registry/spectrumui/loading-button-dependencies\";\n\nconst REACT_OPTIONS: Option[] = [\n  { label: \"nextjs\", value: \"nextjs\" },\n  { label: \"React\", value: \"react\" },\n  { label: \"Remix\", value: \"remix\" },\n  { label: \"shadcn-ui\", value: \"shadcn-ui\" },\n  { label: \"MUI\", value: \"mui\" },\n  { label: \"Ant Design\", value: \"antDesign\" },\n];\n\nconst VUE_OPTIONS: Option[] = [\n  { label: \"Nuxt\", value: \"nuxt\" },\n  { label: \"Vue\", value: \"vue\" },\n  { label: \"Vuetify\", value: \"vuetify\" },\n  { label: \"Quasar\", value: \"quasar\" },\n];\n\nconst MultipleSelectorManuallyControlledOptions = () => {\n  const [options, setOptions] = useState<Option[]>(REACT_OPTIONS);\n  const [placeholder, setPlaceholder] = useState(\n    \"Which framework do you want to use for react?\",\n  );\n  const [toggle, setToggle] = useState(\"react\");\n  return (\n    <div className=\"w-full px-10\">\n      <LoadingButton\n        className=\"mb-3\"\n        onClick={() => {\n          if (toggle === \"react\") {\n            setOptions(VUE_OPTIONS);\n            setPlaceholder(\"Which framework do you want to use for vue?\");\n            setToggle(\"vue\");\n          } else {\n            setOptions(REACT_OPTIONS);\n            setPlaceholder(\"Which framework do you want to use for react?\");\n            setToggle(\"react\");\n          }\n        }}\n      >\n        change options to {toggle === \"react\" ? \"vue\" : \"react\"}\n      </LoadingButton>\n      <MultipleSelector\n        options={options}\n        placeholder={placeholder}\n        emptyIndicator={\n          <p className=\"text-center text-lg leading-10 text-gray-600 dark:text-gray-400\">\n            no results found.\n          </p>\n        }\n      />\n    </div>\n  );\n};\n\nexport default MultipleSelectorManuallyControlledOptions;\n",
      "type": "registry:component",
      "target": "components/spectrumui/multiple-selector-manually-controlled.tsx"
    }
  ],
  "type": "registry:component"
}