mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-17 10:28:06 +08:00
03409af97f
Signed-off-by: lijianan <574980606@qq.com>
84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
import SourceCode from 'dumi/theme-default/builtins/SourceCode';
|
|
import React from 'react';
|
|
import type { TabsProps } from 'antd';
|
|
import { ConfigProvider, Tabs } from 'antd';
|
|
import { createStyles, css } from 'antd-style';
|
|
import NpmLogo from './npm';
|
|
import PnpmLogo from './pnpm';
|
|
import YarnLogo from './yarn';
|
|
|
|
interface InstallProps {
|
|
npm?: string;
|
|
yarn?: string;
|
|
pnpm?: string;
|
|
}
|
|
|
|
const useStyle = createStyles(() => ({
|
|
packageManager: css`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
svg {
|
|
margin-inline-end: 8px;
|
|
}
|
|
`,
|
|
}));
|
|
|
|
const InstallDependencies: React.FC<InstallProps> = (props) => {
|
|
const { npm, yarn, pnpm } = props;
|
|
const { styles } = useStyle();
|
|
|
|
const items = React.useMemo<TabsProps['items']>(
|
|
() =>
|
|
[
|
|
{
|
|
key: 'npm',
|
|
children: npm ? <SourceCode lang="bash">{npm}</SourceCode> : null,
|
|
label: (
|
|
<div className={styles.packageManager}>
|
|
<NpmLogo />
|
|
<span>npm</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'yarn',
|
|
children: yarn ? <SourceCode lang="bash">{yarn}</SourceCode> : null,
|
|
label: (
|
|
<div className={styles.packageManager}>
|
|
<YarnLogo />
|
|
<span>yarn</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'pnpm',
|
|
children: pnpm ? <SourceCode lang="bash">{pnpm}</SourceCode> : null,
|
|
label: (
|
|
<div className={styles.packageManager}>
|
|
<PnpmLogo />
|
|
<span>pnpm</span>
|
|
</div>
|
|
),
|
|
},
|
|
].filter((item) => item.children),
|
|
[npm, yarn, pnpm],
|
|
);
|
|
|
|
return (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Tabs: {
|
|
horizontalMargin: '0',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Tabs className="markdown" size="small" defaultActiveKey="npm" items={items} />
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
|
|
export default InstallDependencies;
|