2023-06-15 23:17:38 +08:00
|
|
|
import type { TabsProps } from 'antd';
|
2023-06-12 15:44:44 +08:00
|
|
|
import { Tabs } from 'antd';
|
|
|
|
import SourceCode from 'dumi/theme-default/builtins/SourceCode';
|
|
|
|
import React from 'react';
|
|
|
|
import NpmLogo from './npm';
|
|
|
|
import PnpmLogo from './pnpm';
|
|
|
|
import YarnLogo from './yarn';
|
|
|
|
|
|
|
|
interface InstallProps {
|
|
|
|
npm?: string;
|
|
|
|
yarn?: string;
|
|
|
|
pnpm?: string;
|
|
|
|
}
|
|
|
|
|
2023-06-15 23:17:38 +08:00
|
|
|
const npmLabel = (
|
|
|
|
<span className="snippet-label">
|
|
|
|
<NpmLogo />
|
|
|
|
npm
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
|
|
|
|
const pnpmLabel = (
|
|
|
|
<span className="snippet-label">
|
|
|
|
<PnpmLogo />
|
|
|
|
pnpm
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
|
|
|
|
const yarnLabel = (
|
|
|
|
<span className="snippet-label">
|
|
|
|
<YarnLogo />
|
|
|
|
yarn
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
|
2023-06-12 15:44:44 +08:00
|
|
|
const InstallDependencies: React.FC<InstallProps> = (props) => {
|
|
|
|
const { npm, yarn, pnpm } = props;
|
2023-06-15 23:17:38 +08:00
|
|
|
const items = React.useMemo<TabsProps['items']>(
|
|
|
|
() =>
|
|
|
|
[
|
2023-06-12 15:44:44 +08:00
|
|
|
{
|
|
|
|
key: 'npm',
|
2023-06-15 23:17:38 +08:00
|
|
|
children: npm ? <SourceCode lang="bash">{npm}</SourceCode> : null,
|
|
|
|
label: npmLabel,
|
2023-06-12 15:44:44 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'yarn',
|
2023-06-15 23:17:38 +08:00
|
|
|
children: yarn ? <SourceCode lang="bash">{yarn}</SourceCode> : null,
|
|
|
|
label: yarnLabel,
|
2023-06-12 15:44:44 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'pnpm',
|
2023-06-15 23:17:38 +08:00
|
|
|
children: pnpm ? <SourceCode lang="bash">{pnpm}</SourceCode> : null,
|
|
|
|
label: pnpmLabel,
|
2023-06-12 15:44:44 +08:00
|
|
|
},
|
2023-06-15 23:17:38 +08:00
|
|
|
].filter((item) => item.children),
|
|
|
|
[npm, yarn, pnpm],
|
2023-06-12 15:44:44 +08:00
|
|
|
);
|
2023-06-15 23:17:38 +08:00
|
|
|
return <Tabs className="antd-site-snippet" defaultActiveKey="npm" items={items} />;
|
2023-06-12 15:44:44 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export default InstallDependencies;
|