Add Tabs component

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@t3-oss/env-nextjs": "^0.13.10",
     "@tanstack/react-table": "^8.21.3",
     "babel-plugin-react-compiler": "^1.0.0",
@@ -49,4 +50,4 @@
   "engines": {
     "node": ">=24.5.2"
   }
-}
+}

src/app/faqs/page.tsx

@@ -0,0 +1,40 @@
+import { FiBookOpen, FiDollarSign, FiEdit, FiFileText, FiSend } from "react-icons/fi"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+export default function Home() {
+  return (
+    <main className="w-full">
+      <div className="mx-auto w-fit py-12">
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">
+              <FiBookOpen className="size-4 shrink-0" />
+              Lezioni
+            </TabsTrigger>
+            <TabsTrigger value="tab2">
+              <FiDollarSign className="size-4 shrink-0" />
+              Tasse
+            </TabsTrigger>
+            <TabsTrigger value="tab3">
+              <FiEdit className="size-4 shrink-0" />
+              Esami
+            </TabsTrigger>
+            <TabsTrigger value="tab4">
+              <FiFileText className="size-4 shrink-0" />
+              Piano di Studi
+            </TabsTrigger>
+            <TabsTrigger value="tab5">
+              <FiSend className="size-4 shrink-0" />
+              Mobilitá Internazionale
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content for Tab 1</TabsContent>
+          <TabsContent value="tab2">Content for Tab 2</TabsContent>
+          <TabsContent value="tab3">Content for Tab 3</TabsContent>
+          <TabsContent value="tab4">Content for Tab 4</TabsContent>
+          <TabsContent value="tab5">Content for Tab 5</TabsContent>
+        </Tabs>
+      </div>
+    </main>
+  )
+}

src/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Glass } from "../glass"
+
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return <TabsPrimitive.Root data-slot="tabs" className={cn("group/tabs flex flex-col gap-2", className)} {...props} />
+}
+
+function TabsList({ className, children, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List data-slot="tabs-list" {...props}>
+      <Glass
+        className={cn(
+          "inline-flex items-center gap-2 rounded-3xl border-white/50 bg-background-blur p-2.5 text-card-foreground",
+          className
+        )}
+      >
+        {children}
+      </Glass>
+    </TabsPrimitive.List>
+  )
+}
+
+function TabsTrigger({ className, children, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "group typo-label-large relative flex items-center justify-center gap-1.5 overflow-hidden whitespace-nowrap rounded-xl bg-transparent px-3 py-1.5",
+        // "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/50", // TODO Focus ring for accessibility - do we have a standard focus style?
+        className
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        className="absolute inset-0 rounded-xl bg-blue-tertiary opacity-0 transition-opacity duration-500 ease-in-out group-data-[state=active]:opacity-100"
+      />
+      <span className="relative z-10 flex items-center justify-center gap-1.5">{children}</span>
+    </TabsPrimitive.Trigger>
+  )
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }