Repository: supabase/supabase
File: apps/docs/features/ui/McpConfigPanel.tsx (TypeScript)

Code before:
                  />
                </CommandItem_Shadcn_>
              ))}
            </CommandGroup_Shadcn_>
          </CommandList_Shadcn_>
        </Command_Shadcn_>
      </PopoverContent_Shadcn_>
    </Popover_Shadcn_>
  )
}

function PlatformSelector({
  className,
  selectedPlatform,
  onPlatformSelect,
}: {
  className?: string
  selectedPlatform: 'hosted' | 'local'
  onPlatformSelect?: (platform: 'hosted' | 'local') => void
}) {
  const [open, setOpen] = useState(false)

  const platforms = [
    { value: 'hosted', label: 'Hosted' },
    { value: 'local', label: 'CLI' },
  ]

  return (
    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
      <div className={cn('flex', className)}>
        <span className="flex items-center text-foreground-lighter px-3 rounded-lg rounded-r-none text-xs border border-button border-r-0">
          Platform
        </span>

        <PopoverTrigger_Shadcn_ asChild>
          <Button
            size="small"
            type="default"
            className="gap-0 rounded-l-none"
            iconRight={
              <ChevronDown
                strokeWidth={1.5}
                className={cn('transition-transform duration-200', open && 'rotate-180')}
              />
            }
          >
            <div className="flex items-center gap-2">
              {platforms.find((p) => p.value === selectedPlatform)?.label}
            </div>
          </Button>
        </PopoverTrigger_Shadcn_>

Review comment (suggestion):
If we mark this `as const`, we won't need the ` as 'hosted' | 'local'` casting below.

```suggestion
  const platforms = [
    { value: 'hosted', label: 'Hosted' },
    { value: 'local', label: 'CLI' },
  ] as const
```

Code after:
                  <Check
                    aria-label={project.ref === selectedProject?.ref ? 'selected' : undefined}
                    size={15}
                    className={cn(
                      'ml-auto',
                      project.ref === selectedProject?.ref ? 'opacity-100' : 'opacity-0'
                    )}
                  />
                </CommandItem_Shadcn_>
              ))}
            </CommandGroup_Shadcn_>
          </CommandList_Shadcn_>
        </Command_Shadcn_>
      </PopoverContent_Shadcn_>
    </Popover_Shadcn_>
  )
}

function PlatformSelector({
  className,
  selectedPlatform,
  onPlatformSelect,
}: {
  className?: string
  selectedPlatform: PlatformType
  onPlatformSelect?: (platform: PlatformType) => void
}) {
  const [open, setOpen] = useState(false)

  return (
    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
      <div className={cn('flex', className)}>
        <span className="flex items-center text-foreground-lighter px-3 rounded-lg rounded-r-none text-xs border border-button border-r-0">
          Platform
        </span>

        <PopoverTrigger_Shadcn_ asChild>
          <Button
            size="small"
            type="default"
            className="gap-0 rounded-l-none"
            iconRight={
              <ChevronDown
                strokeWidth={1.5}
                className={cn('transition-transform duration-200', open && 'rotate-180')}
              />
            }
          >
            <div className="flex items-center gap-2">
              {PLATFORMS.find((p) => p.value === selectedPlatform)?.label}
            </div>