snowballtools-base/packages/frontend/src/components/shared/Tabs/TabsContent/TabsContent.tsx
Wahyu Kurniawan ea44efa0f2
[T-4867: feat] Horizontal and vertical tabs component (#84)
* ️ feat: create tabs component

* ♻️ refactor: avoid big conflict on the example page

* 🔧 chore: upgrade tailwindcss and install `@radix-ui/react-tabs`

* ️ feat: create globe icon component

* 🎨 style: adjust vertical tab theme

* 📝 docs: add vertical tabs to the example page
2024-02-21 16:13:16 +07:00

27 lines
720 B
TypeScript

import React, {
forwardRef,
type ComponentPropsWithoutRef,
type ElementRef,
} from 'react';
import { Content } from '@radix-ui/react-tabs';
import { tabsTheme } from '../Tabs.theme';
export interface TabsContentProps
extends ComponentPropsWithoutRef<typeof Content> {}
/**
* A component that represents the content of the tabs component.
*/
const TabsContent = forwardRef<ElementRef<typeof Content>, TabsContentProps>(
({ className, ...props }, ref) => {
const { content } = tabsTheme();
return <Content ref={ref} className={content({ className })} {...props} />;
},
);
// Assigns the display name to the TabsContent component.
TabsContent.displayName = 'TabsContent';
export { TabsContent };