how to implement multiple tabs in ant desing pro

To implement multiple tabs in Ant Design Pro, you can use the `Tabs` component provided by Ant Design. Here are the steps:

1. Import the `Tabs` component from Ant Design:

   import { Tabs } from 'antd';

2. Define the tabs and their content:

   const { TabPane } = Tabs;

   function callback(key) {
     console.log(key);
   }

   <Tabs defaultActiveKey="1" onChange={callback}>
     <TabPane tab="Tab 1" key="1">
       Content of Tab Pane 1
     </TabPane>
     <TabPane tab="Tab 2" key="2">
       Content of Tab Pane 2
     </TabPane>
     <TabPane tab="Tab 3" key="3">
       Content of Tab Pane 3
     </TabPane>
   </Tabs>

In this example, we have defined three tabs with the content for each tab. We have also defined a `callback` function that will be called when the active tab changes.

3. Customize the tabs using props:

The `Tabs` component provides several props that can be used to customize the appearance and behavior of the tabs. Some of the commonly used props are:

- `defaultActiveKey`: The key of the tab that should be active by default.
- `activeKey`: The key of the currently active tab.
- `onChange`: A function that will be called when the active tab changes.
- `tabBarStyle`: An object that can be used to style the tab bar.
- `tabBarExtraContent`: Content that should be displayed to the right of the tabs.

For example, you can set the `tabBarStyle` prop to change the background color of the tab bar:

   <Tabs
     defaultActiveKey="1"
     onChange={callback}
     tabBarStyle={{ background: '#fff' }}
   >
     ...
   </Tabs>

You can also use the `tabBarExtraContent` prop to add buttons or other elements to the right of the tabs:

   <Tabs
     defaultActiveKey="1"
     onChange={callback}
     tabBarExtraContent={
       <Button type="primary" size="small">
         New Tab
       </Button>
     }
   >
     ...
   </Tabs>

In this example, we have added a `Button` component to the right of the tabs.