Glass Tabs

1"use client"
2 
3import * as React from "react"
4import * as TabsPrimitive from "@radix-ui/react-tabs"
5import { motion, AnimatePresence } from "framer-motion"
6import { cn } from "@/lib/utils"
7 
8const GlassTabs = TabsPrimitive.Root
9 
10const GlassTabsList = React.forwardRef<
11  React.ElementRef<typeof TabsPrimitive.List>,
12  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13>(({ className, ...props }, ref) => (
14  <div className="relative">
15    <motion.div
16      className="absolute -inset-1 rounded-2xl bg-linear-to-r from-cyan-500/20 via-blue-500/20 to-purple-500/20 blur-lg"
17      animate={{
18        opacity: [0.4, 0.6, 0.4],
19      }}
20      transition={{
21        duration: 3,
22        repeat: Number.POSITIVE_INFINITY,
23        ease: "easeInOut",
24      }}
25      aria-hidden="true"
26    />
27    <TabsPrimitive.List
28      ref={ref}
29      className={cn(
30        "relative inline-flex h-12 items-center justify-center gap-1 rounded-xl p-1",
31        "bg-white/10 backdrop-blur-xl border border-white/20",
32        "shadow-[0_4px_16px_rgba(0,0,0,0.2)]",
33        className,
34      )}
35      aria-label="Tab navigation"
36      {...props}
37    />
38  </div>
39))
40GlassTabsList.displayName = TabsPrimitive.List.displayName
41 
42const GlassTabsTrigger = React.forwardRef<
43  React.ElementRef<typeof TabsPrimitive.Trigger>,
44  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
45>(({ className, ...props }, ref) => (
46  <TabsPrimitive.Trigger
47    ref={ref}
48    className={cn(
49      "relative inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2",
50      "text-sm font-medium text-white/60 transition-colors duration-200",
51      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
52      "disabled:pointer-events-none disabled:opacity-50",
53      "hover:text-white/80 hover:bg-white/5",
54      "data-[state=active]:bg-white/20 data-[state=active]:text-white",
55      "data-[state=active]:shadow-[0_2px_8px_rgba(0,0,0,0.2)]",
56      "data-[state=active]:before:absolute data-[state=active]:before:inset-0",
57      "data-[state=active]:before:rounded-lg data-[state=active]:before:bg-linear-to-b",
58      "data-[state=active]:before:from-white/20 data-[state=active]:before:to-transparent",
59      "data-[state=active]:before:pointer-events-none",
60      className,
61    )}
62    {...props}
63  />
64))
65GlassTabsTrigger.displayName = TabsPrimitive.Trigger.displayName
66 
67const GlassTabsContent = React.forwardRef<
68// … truncated