diff --git a/package.json b/package.json index 0ccd5e6..4f52409 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2c9e7c1..3ba7519 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@radix-ui/react-slot': specifier: ^1.2.4 version: 1.2.4(@types/react@19.2.7)(react@19.2.3) + '@radix-ui/react-tabs': + specifier: ^1.1.13 + version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) '@t3-oss/env-nextjs': specifier: ^0.13.10 version: 0.13.10(typescript@5.9.3)(zod@4.2.1) @@ -592,6 +595,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-roving-focus@1.1.11': + resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-select@2.2.6': resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==} peerDependencies: @@ -636,6 +652,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-tabs@1.1.13': + resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-use-callback-ref@1.1.1': resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==} peerDependencies: @@ -1552,6 +1581,23 @@ snapshots: '@types/react': 19.2.7 '@types/react-dom': 19.2.3(@types/react@19.2.7) + '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': + dependencies: + '@radix-ui/primitive': 1.1.3 + '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3) + '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3) + '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3) + '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3) + '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3) + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + optionalDependencies: + '@types/react': 19.2.7 + '@types/react-dom': 19.2.3(@types/react@19.2.7) + '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': dependencies: '@radix-ui/number': 1.1.1 @@ -1604,6 +1650,22 @@ snapshots: optionalDependencies: '@types/react': 19.2.7 + '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': + dependencies: + '@radix-ui/primitive': 1.1.3 + '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3) + '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3) + '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3) + '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3) + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + optionalDependencies: + '@types/react': 19.2.7 + '@types/react-dom': 19.2.3(@types/react@19.2.7) + '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.7)(react@19.2.3)': dependencies: react: 19.2.3 diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx new file mode 100644 index 0000000..8554e3e --- /dev/null +++ b/src/app/faqs/page.tsx @@ -0,0 +1,59 @@ +import { FiBookOpen, FiDollarSign, FiEdit, FiFileText, FiSend } from "react-icons/fi" +import TabsNavigation from "@/components/tabs-navigation" +import { Tabs, TabsContent } from "@/components/ui/tabs" + +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: ( +
+

Content for Tab 5

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. +

+
+ ), + icon: FiSend, + }, +] + +export default function FAQsPage() { + return ( +
+ + + {faqItems.map((item) => ( + + {item.content} + + ))} + +
+ ) +} diff --git a/src/components/tabs-navigation/index.tsx b/src/components/tabs-navigation/index.tsx new file mode 100644 index 0000000..2c0db1f --- /dev/null +++ b/src/components/tabs-navigation/index.tsx @@ -0,0 +1,20 @@ +import { TabsList, TabsTrigger } from "@/components/ui/tabs" +import { cn } from "@/lib/utils" +import type { TabsNavigationProps } from "./types" + +export default function TabsNavigation({ items, className }: TabsNavigationProps) { + return ( + + {items.map((item) => { + const Icon = item.icon + + return ( + + {Icon && } + {item.label} + + ) + })} + + ) +} diff --git a/src/components/tabs-navigation/types.ts b/src/components/tabs-navigation/types.ts new file mode 100644 index 0000000..3606ff3 --- /dev/null +++ b/src/components/tabs-navigation/types.ts @@ -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 +} diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx new file mode 100644 index 0000000..75fd48b --- /dev/null +++ b/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) { + return +} + +function TabsList({ className, children, ...props }: React.ComponentProps) { + return ( + + + {children} + + + ) +} + +function TabsTrigger({ className, children, ...props }: React.ComponentProps) { + return ( + + + ) +} + +function TabsContent({ className, ...props }: React.ComponentProps) { + return +} + +export { Tabs, TabsList, TabsTrigger, TabsContent }