-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
index.tsx
42 lines (36 loc) 路 1.04 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { useIntl, useRouteMeta } from 'dumi';
import React, { type FC } from 'react';
import './index.less';
type IContentTabs = ReturnType<typeof useRouteMeta>['tabs'];
export interface IContentTabsProps {
tabs: IContentTabs;
tabKey: string | null;
onChange: (tab?: NonNullable<IContentTabs>[0]) => void;
}
const ContentTabs: FC<IContentTabsProps> = ({
tabs,
tabKey: key,
onChange,
}) => {
const intl = useIntl();
// TODO: tab.Extra & tab.Action render
return Boolean(tabs?.length) ? (
<ul className="dumi-default-content-tabs">
<li onClick={() => onChange()} data-active={!key || undefined}>
<button type="button">
{intl.formatMessage({ id: 'content.tabs.default' })}
</button>
</li>
{tabs!.map((tab) => (
<li
key={tab.key}
onClick={() => onChange(tab)}
data-active={key === tab.key || undefined}
>
<button type="button">{tab.meta.frontmatter.title}</button>
</li>
))}
</ul>
) : null;
};
export default ContentTabs;