feat: add Tabs component (#86)

* feat: add Tabs component using Radix UI

* feat: implement Tabs component with additional triggers for FAQs

* fix: rename to FAQsPage for clarity

* refactor: simplify FAQ tab rendering

* feat: add TabsNavigation component for improved tab rendering

* feat: refactor Tabs component structure

---------

Co-authored-by: Tommaso Morganti <tommaso.morganti01@gmail.com>

Author: BIA3IA

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"
   }
-}
+}

pnpm-lock.yaml

@@ -0,0 +1,62 @@
+"use client"
+
+import { FiBookOpen, FiDollarSign, FiEdit, FiFileText, FiSend } from "react-icons/fi"
+import TabsNavigation from "@/components/tabs"
+import { Tabs } from "@/components/tabs/tabs"
+import { TabsContent } from "@/components/tabs/tabs-content"
+
+const faqItems = [
+  {
+    value: "tab1",
+    label: "Lezioni",
+    content: "Content for Tab 1",
+    icon: FiBookOpen,
+  },
+  {
+    value: "tab2",
+    label: "Tasse",
+    content: "Content for Tab 2",
+    icon: FiDollarSign,
+  },
+  {
+    value: "tab3",
+    label: "Esami",
+    content: "Content for Tab 3",
+    icon: FiEdit,
+  },
+  {
+    value: "tab4",
+    label: "Piano di Studi",
+    content: "Content for Tab 4",
+    icon: FiFileText,
+  },
+  {
+    value: "tab5",
+    label: "Mobilitá Internazionale",
+    content: (
+      <div className="flex flex-col items-start py-4">
+        <h1 className="typo-title-large">Content for Tab 5</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua.
+        </p>
+      </div>
+    ),
+    icon: FiSend,
+  },
+]
+
+export default function FAQsPage() {
+  return (
+    <main className="w-full py-12">
+      <Tabs defaultValue="tab5" className="flex flex-col items-center">
+        <TabsNavigation items={faqItems} />
+        {faqItems.map((item) => (
+          <TabsContent value={item.value} key={item.value}>
+            {item.content}
+          </TabsContent>
+        ))}
+      </Tabs>
+    </main>
+  )
+}

src/app/faqs/page.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { TabsList } from "./tabs-list"
+import { TabsTrigger } from "./tabs-trigger"
+import type { TabsNavigationProps } from "./types"
+
+export default function TabsNavigation({ items, className }: TabsNavigationProps) {
+  return (
+    <TabsList className={cn(className)}>
+      {items.map((item) => {
+        const Icon = item.icon
+
+        return (
+          <TabsTrigger value={item.value} key={item.value}>
+            {Icon && <Icon className="size-4 shrink-0" />}
+            {item.label}
+          </TabsTrigger>
+        )
+      })}
+    </TabsList>
+  )
+}

src/components/tabs/index.tsx

@@ -0,0 +1,8 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
+}

src/components/tabs/tabs-content.tsx

@@ -0,0 +1,20 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Glass } from "../glass"
+
+export 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>
+  )
+}

src/components/tabs/tabs-list.tsx

@@ -0,0 +1,24 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export 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>
+  )
+}

src/components/tabs/tabs-trigger.tsx

@@ -0,0 +1,8 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export 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} />
+}

src/components/tabs/tabs.tsx

@@ -0,0 +1,12 @@
+import type { IconType } from "react-icons"
+
+export type TabsNavigationItem = {
+  value: string
+  label: string
+  icon?: IconType
+}
+
+export type TabsNavigationProps = {
+  items: TabsNavigationItem[]
+  className?: string
+}