Add global installation option (e.g. `pnpm add -g`) for `HomePage.InstallPackage`

[guidanoli]

I'm developing a CLI, and would like for people to install it with pnpm add -g (and equivalents for other package managers). However, the HomePage.InstallPackage component only allows two types: init and add.

[spmoe]

To add a global installation option to your HomePage.InstallPackage component, you can modify the component to handle a new type, such as global, and then render the appropriate command based on this type. Here's an example of how you could update the component:

1. Update the Component to Handle a New Type:

// HomePage/InstallPackage.tsx

import React from 'react';

interface InstallPackageProps {
  type: 'init' | 'add' | 'global';
  packageName: string;
}

const InstallPackage: React.FC<InstallPackageProps> = ({ type, packageName }) => {
  let command = '';

  switch (type) {
    case 'init':
      command = `pnpm init ${packageName}`;
      break;
    case 'add':
      command = `pnpm add ${packageName}`;
      break;
    case 'global':
      command = `pnpm add -g ${packageName}`;
      break;
    default:
      command = '';
  }

  return (
    <div>
      <code>{command}</code>
    </div>
  );
};

export default InstallPackage;

2. Use the Updated Component with the New Type:

// Usage example
import React from 'react';
import InstallPackage from './HomePage/InstallPackage';

const MyComponent: React.FC = () => {
  return (
    <div>
      <h1>Install My CLI</h1>
      <InstallPackage type="global" packageName="my-cli-package" />
    </div>
  );
};

export default MyComponent;

This modification introduces a global type to the InstallPackage component, allowing it to generate the global installation command for your CLI. You can extend this further for other package managers like npm or yarn by adding additional cases in the switch statement.