Open guidanoli opened 3 months ago
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:
// 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;
// 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.
I'm developing a CLI, and would like for people to install it with
pnpm add -g
(and equivalents for other package managers). However, theHomePage.InstallPackage
component only allows two types:init
andadd
.