ant-design/.dumi/theme/builtins/InstallDependencies/index.tsx
lijianan 03409af97f
fix: remove extra parentheses
Signed-off-by: lijianan <574980606@qq.com>
2023-11-24 23:06:58 +08:00

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;