Glass Tabs

1'use client'
2 
3import * as React from 'react'
4import { Tabs as TabsPrimitive } from 'radix-ui'
5 
6import { cn } from '@/lib/utils'
7 
8const GlassTabs = TabsPrimitive.Root
9 
10const GlassTabsList = React.forwardRef<
11  React.ComponentRef<typeof TabsPrimitive.List>,
12  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13>(({ className, ...props }, ref) => (
14  <TabsPrimitive.List
15    ref={ref}
16    className={cn(
17      'inline-flex items-center gap-1 rounded-full border border-muted bg-muted p-1 backdrop-blur',
18      className,
19    )}
20    {...props}
21  />
22))
23GlassTabsList.displayName = TabsPrimitive.List.displayName
24 
25const GlassTabsTrigger = React.forwardRef<
26  React.ComponentRef<typeof TabsPrimitive.Trigger>,
27  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28>(({ className, ...props }, ref) => (
29  <TabsPrimitive.Trigger
30    ref={ref}
31    className={cn(
32      'rounded-full px-3.5 py-1.5 text-sm text-muted-foreground dark:text-body transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-ruri data-[state=active]:font-medium data-[state=active]:text-white dark:data-[state=active]:bg-ruri-soft dark:data-[state=active]:text-deep',
33      className,
34    )}
35    {...props}
36  />
37))
38GlassTabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 
40const GlassTabsContent = React.forwardRef<
41  React.ComponentRef<typeof TabsPrimitive.Content>,
42  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43>(({ className, ...props }, ref) => (
44  <TabsPrimitive.Content
45    ref={ref}
46    className={cn(
47      'mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
48      className,
49    )}
50    {...props}
51  />
52))
53GlassTabsContent.displayName = TabsPrimitive.Content.displayName
54 
55export { GlassTabs, GlassTabsList, GlassTabsTrigger, GlassTabsContent }