mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 01:29:11 +08:00
46 lines
930 B
JavaScript
46 lines
930 B
JavaScript
import React from 'react';
|
|
import { Tabs } from 'antd';
|
|
|
|
const { TabPane } = Tabs;
|
|
|
|
const LANGS = {
|
|
tsx: 'TypeScript',
|
|
jsx: 'JavaScript',
|
|
};
|
|
|
|
const CodePreview = ({ toReactComponent, codes, onCodeTypeChange }) => {
|
|
const langList = Object.keys(codes).sort().reverse();
|
|
|
|
let content;
|
|
|
|
if (langList.length === 1) {
|
|
content = toReactComponent([
|
|
'pre',
|
|
{
|
|
lang: langList[0],
|
|
highlighted: codes[langList[0]],
|
|
},
|
|
]);
|
|
} else {
|
|
content = (
|
|
<Tabs centered onChange={onCodeTypeChange}>
|
|
{langList.map(lang => (
|
|
<TabPane tab={LANGS[lang]} key={lang}>
|
|
{toReactComponent([
|
|
'pre',
|
|
{
|
|
lang,
|
|
highlighted: codes[lang],
|
|
},
|
|
])}
|
|
</TabPane>
|
|
))}
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
return <div className="highlight">{content}</div>;
|
|
};
|
|
|
|
export default CodePreview;
|