Repository: expo/expo
File: docs/ui/components/Snippet/blocks/Terminal.tsx (TypeScript)

Code before:
/**
 *
 * @param managers - The available package managers.
 * @param activeManager - The currently active package manager.
 * @param onSelect - The function to call when a package manager is selected.
 * @returns
 */
const PackageTabs = ({ managers, activeManager, onSelect, className }: PackageTabsProps) => (
  <div
    role="tablist"
    aria-label="Package managers"
    className={mergeClasses('flex items-center gap-1 whitespace-nowrap', className)}>
    {managers.map(manager => {
      const isActive = manager === activeManager;
      return (
        <button
          key={manager}
          type="button"
          role="tab"
          aria-selected={isActive}
          className={mergeClasses(
            'rounded-md px-2 py-1 text-xs font-semibold transition-colors',
            isActive
              ? 'bg-palette-gray6 text-palette-white'
              : 'text-palette-gray9 hover:text-palette-white focus-visible:text-palette-white'
          )}
          onClick={() => {
            onSelect(manager);
          }}>
          {PACKAGE_MANAGER_LABELS[manager]}
        </button>
      );
    })}
  </div>
);

const PackageSelect = ({ managers, activeManager, onSelect, className }: PackageTabsProps) => (
  <Select
    className={mergeClasses(
      '!h-6 !min-h-[16px] min-w-[76px] !gap-1 !px-2 !py-0 text-xs [&_svg]:!h-3 [&_svg]:!w-3',
      className
    )}
    ariaLabel="Select package manager"
    value={activeManager ?? managers[0]}
    onValueChange={onSelect as (value: string) => void}
    options={managers.map(manager => ({
      id: manager,
      label: PACKAGE_MANAGER_LABELS[manager],
    }))}
    size="md"
  />

Review comment (suggestion):
In all the other selects we have, we highlight the background only on hover instead of the text. I think this would look more consistent if we did the same (so sth like `hover:bg-palette-gray5`).

Code after:
}

/**
 *
 * @param managers - The available package managers.
 * @param activeManager - The currently active package manager.
 * @param onSelect - The function to call when a package manager is selected.
 * @returns
 */
const PackageTabs = ({ managers, activeManager, onSelect, className }: PackageTabsProps) => (
  <span
    role="tablist"
    aria-label="Package managers"
    className={mergeClasses('inline-flex items-center gap-1 whitespace-nowrap', className)}>
    {managers.map(manager => {
      const isActive = manager === activeManager;
      return (
        <button
          key={manager}
          type="button"
          role="tab"
          aria-selected={isActive}
          className={mergeClasses(
            'rounded-md px-2 py-1 text-xs font-semibold transition-colors',
            isActive
              ? 'bg-palette-gray6 text-palette-white'
              : 'text-palette-gray9 hocus:bg-palette-gray5'
          )}
          onClick={() => {
            onSelect(manager);
          }}>
          {manager}
        </button>
      );
    })}
  </span>
);

const PackageSelect = ({ managers, activeManager, onSelect, className }: PackageTabsProps) => (
  <Select
    className={mergeClasses(
      '!h-6 !min-h-[16px] min-w-[76px] !gap-1 !px-2 !py-0 text-xs [&_svg]:!h-3 [&_svg]:!w-3',
      className
    )}
    ariaLabel="Select package manager"
    value={activeManager ?? managers[0]}
    onValueChange={onSelect as (value: string) => void}
    options={managers.map(manager => ({
      id: manager,
      label: manager,
    }))}