mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 00:29:12 +08:00
3c979eb84b
* site: hide pkgManager tab when the command is empty * feat: optimize code * feat: optimize code
63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import type { TabsProps } from 'antd';
|
|
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;
|
|
}
|
|
|
|
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>
|
|
);
|
|
|
|
const InstallDependencies: React.FC<InstallProps> = (props) => {
|
|
const { npm, yarn, pnpm } = props;
|
|
const items = React.useMemo<TabsProps['items']>(
|
|
() =>
|
|
[
|
|
{
|
|
key: 'npm',
|
|
children: npm ? <SourceCode lang="bash">{npm}</SourceCode> : null,
|
|
label: npmLabel,
|
|
},
|
|
{
|
|
key: 'yarn',
|
|
children: yarn ? <SourceCode lang="bash">{yarn}</SourceCode> : null,
|
|
label: yarnLabel,
|
|
},
|
|
{
|
|
key: 'pnpm',
|
|
children: pnpm ? <SourceCode lang="bash">{pnpm}</SourceCode> : null,
|
|
label: pnpmLabel,
|
|
},
|
|
].filter((item) => item.children),
|
|
[npm, yarn, pnpm],
|
|
);
|
|
return <Tabs className="antd-site-snippet" defaultActiveKey="npm" items={items} />;
|
|
};
|
|
|
|
export default InstallDependencies;
|