@amsterdam/design-system-react/dist/Tabs/TabsPanel.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { forwardRef, useContext } from 'react';
import { TabsContext } from './TabsContext';
export const TabsPanel = forwardRef(({ children, className, id, ...restProps }, ref) => {
    const { activeTabId } = useContext(TabsContext);
    if (id !== activeTabId) {
        return null;
    }
    return (_jsx("div", { ...restProps, "aria-labelledby": `button-${id}`, className: clsx('ams-tabs__panel', className), id: id, ref: ref, role: "tabpanel", tabIndex: 0, children: children }));
});
TabsPanel.displayName = 'Tabs.Panel';