# give/4.18.0/src/Views/Components/AdminDetailsPage/Tabs/TabPanels.tsx

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 29 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Views/Components/AdminDetailsPage/Tabs/TabPanels.tsx
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Views/Components/AdminDetailsPage/Tabs/TabPanels.tsx
- Modified: 2025-06-18T15:01:58+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.18.0/code/src/Views/Components/AdminDetailsPage/Tabs/TabPanels.tsx#L10-L20`.

```tsx
import { __ } from '@wordpress/i18n';
import { TabPanel, TabsContext } from 'react-aria-components';
import { Tab as TabType } from '../types';
import ErrorBoundary from '../ErrorBoundary';
import styles from '../AdminDetailsPage.module.scss';
import { useContext } from 'react';

/**
 * @since 4.4.0
 */
export default function TabPanels({ tabDefinitions }: { tabDefinitions: TabType[] }) {
    // @ts-ignore
    const {selectedKey} = useContext(TabsContext);
    const activeTab = tabDefinitions.find((tab) => tab.id === selectedKey);
    const isFullWidth = activeTab?.fullwidth;

    return (
        <div className={`${styles.pageContent} ${isFullWidth ? styles.fullWidth : ''}`}>
            <ErrorBoundary>
                {tabDefinitions.map((tab) => (
                    <TabPanel key={tab.id} id={tab.id}>
                        <tab.content />
                    </TabPanel>
                ))}
            </ErrorBoundary>
        </div>
    );
}

```