forked from cerc-io/snowballtools-base
* ⚡️ 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
27 lines
720 B
TypeScript
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 };
|