veza/apps/web/src/components/ui/tabs/TabsContent.tsx

import * as React from 'react';
import { cn } from '@/lib/utils';
import type { TabsContentProps } from './types';

export const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
  (
    { className, value: contentValue, activeValue, tabsId, children, ...props },
    ref,
  ) => {
    if (activeValue !== contentValue) {
      return null;
    }

    const panelId = tabsId ? `${tabsId}-panel-${contentValue}` : undefined;
    const tabId = tabsId ? `${tabsId}-tab-${contentValue}` : undefined;

    return (
      <div
        ref={ref}
        id={panelId}
        role="tabpanel"
        aria-labelledby={tabId}
        tabIndex={0}
        className={cn(
          'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
          className,
        )}
        {...props}
      >
        {children}
      </div>
    );
  },
);
TabsContent.displayName = 'TabsContent';