Function InstallCommand

packages/dev/s2-docs/src/InstallCommand.tsx:59–115

({pkg, flags, label, isCommand}: InstallCommandProps)

}

export function InstallCommand({pkg, flags, label, isCommand}: InstallCommandProps) {
  let [manager, setManager] = useLocalStorage('packageManager', 'npm');

  let onSelectionChange = (key: Key) => {
    let value = String(key) as PkgManager;
    setManager(value);
  };

  let command = useMemo(() => {
    let parts: string[] = [];
    if (isCommand) {
      parts = ['npx', pkg];
    } else {
      switch (manager) {
        case 'yarn':
          parts = ['yarn', 'add'];
          break;
        case 'npm':
          parts = ['npm', 'install'];
          break;
        case 'pnpm':
          parts = ['pnpm', 'add'];
          break;
      }
      parts.push(pkg);
    }
    if (flags) {
      parts.push(flags);
    }
    return parts.join(' ');
  }, [isCommand, manager, pkg, flags]);

  return (
    <div className={container} data-example-switcher>
      {!isCommand && (
        <SegmentedControl
          selectedKey={manager}
          onSelectionChange={onSelectionChange}
          styles={switcher}>
          <SegmentedControlItem id="npm">npm</SegmentedControlItem>
          <SegmentedControlItem id="yarn">yarn</SegmentedControlItem>
          <SegmentedControlItem id="pnpm">pnpm</SegmentedControlItem>
        </SegmentedControl>
      )}
      <div className={codeWrap}>
        {label && (
          <div className={style({font: 'body-sm', marginBottom: 8, color: 'body'})}>{label}</div>
        )}
        <div className={style({display: 'flex', alignItems: 'center', gap: 12, padding: 8})}>
          <Prompt styles={iconStyle({size: 'L'})} />
          <pre className={preStyle}>{command}</pre>
          <CopyButton ariaLabel="Copy command" tooltip="Copy command" text={command} />
        </div>
      </div>
    </div>
  );
}