snowballtools-base/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx
2024-02-21 14:24:35 +07:00

60 lines
1.7 KiB
TypeScript

import React, {
forwardRef,
type ComponentPropsWithoutRef,
type ElementRef,
type PropsWithChildren,
type ReactNode,
} from 'react';
import { Trigger } from '@radix-ui/react-tabs';
import { tabsTheme } from 'components/shared/Tabs/Tabs.theme';
import { useTabs } from 'components/shared/Tabs/TabsProvider';
export interface TabsTriggerProps
extends ComponentPropsWithoutRef<typeof Trigger> {
/**
* The icon to display in the trigger.
*/
icon?: ReactNode;
}
/**
* A component that represents the trigger for the tabs component.
*/
const TabsTrigger = forwardRef<
ElementRef<typeof Trigger>,
PropsWithChildren<TabsTriggerProps>
>(({ className, icon, children, ...props }, ref) => {
const config = useTabs();
const { triggerWrapper, trigger } = tabsTheme(config);
const orientation = config.orientation;
return (
<Trigger
ref={ref}
// Disabled focus state for horizontal tabs
tabIndex={orientation === 'horizontal' ? -1 : undefined}
className={triggerWrapper({ className })}
{...props}
>
{/* Need to add button in the trigger children because there's focus state inside the children */}
<button
data-orientation={orientation}
// Disabled focus state for vertical tabs
tabIndex={orientation === 'vertical' ? -1 : undefined}
className={trigger()}
>
{/* Put the icon on the left of the text for veritcal tab */}
{orientation === 'vertical' && icon}
{children}
{/* Put the icon on the right of the text for horizontal tab */}
{orientation === 'horizontal' && icon}
</button>
</Trigger>
);
});
TabsTrigger.displayName = 'TabsTrigger';
export { TabsTrigger };