Tabs

1"use client"
2 
3import * as React from "react"
4import { Tabs as BaseTabs, TabsContent, TabsList as BaseTabsList, TabsTrigger } from "@/components/ui/tabs"
5import { cn } from "@/lib/utils"
6import { hoverEffects, type HoverEffect } from "@/lib/hover-effects"
7 
8export interface TabsListProps extends React.ComponentProps<typeof BaseTabsList> {
9  glow?: boolean
10  hover?: HoverEffect
11}
12 
13/**
14 * Glass UI Tabs - Enhanced tabs with glassy effects
15 */
16export const TabsList = React.forwardRef<
17  React.ElementRef<typeof BaseTabsList>,
18  TabsListProps
19>(({ className, variant = "glass", glow = false, hover = "none", ...props }, ref) => {
20  return (
21    <BaseTabsList
22      ref={ref}
23      variant={variant}
24      className={cn(
25        "relative overflow-hidden",
26        glow && "shadow-lg shadow-purple-500/20",
27        hoverEffects({ hover }),
28        className
29      )}
30      {...props}
31    />
32  )
33})
34TabsList.displayName = "TabsList"
35 
36export {
37  BaseTabs as Tabs,
38  TabsContent,
39  TabsTrigger,
40}
41