add components

src/components/ui/tabs/tabs.tsx

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { clsx } from 'clsx'
+
+import s from './tabs.module.scss'
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = forwardRef<
+  ElementRef<typeof TabsPrimitive.List>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List ref={ref} className={clsx(s.list, className)} {...props} />
+))
+
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = forwardRef<
+  ElementRef<typeof TabsPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger ref={ref} className={clsx(s.trigger, className)} {...props} />
+))
+
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = forwardRef<
+  ElementRef<typeof TabsPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content ref={ref} className={clsx(s.content, className)} {...props} />
+))
+
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }