From 220a2d7dce812d38bf57a16fec6f47193813fdff Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 14 Apr 2026 17:38:57 +0200 Subject: [PATCH 1/4] feat: add Accordion component and FAQ page --- package.json | 3 +- pnpm-lock.yaml | 62 +++++++++++++++++++++++++++++++++ src/app/faqs/page.tsx | 46 ++++++++++++++++++++++++ src/components/ui/accordion.tsx | 52 +++++++++++++++++++++++++++ 4 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 src/app/faqs/page.tsx create mode 100644 src/components/ui/accordion.tsx diff --git a/package.json b/package.json index 0ccd5e6..acf5074 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-accordion": "^1.2.12", "@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..072d523 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@radix-ui/react-accordion': + specifier: ^1.2.12 + version: 1.2.12(@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-select': specifier: ^2.2.6 version: 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) @@ -417,6 +420,19 @@ packages: '@radix-ui/primitive@1.1.3': resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==} + '@radix-ui/react-accordion@1.2.12': + resolution: {integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==} + 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-arrow@1.1.7': resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==} peerDependencies: @@ -430,6 +446,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-collapsible@1.1.12': + resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==} + 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-collection@1.1.7': resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==} peerDependencies: @@ -1398,6 +1427,23 @@ snapshots: '@radix-ui/primitive@1.1.3': {} + '@radix-ui/react-accordion@1.2.12(@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-collapsible': 1.1.12(@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-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-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-arrow@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)': dependencies: '@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) @@ -1407,6 +1453,22 @@ snapshots: '@types/react': 19.2.7 '@types/react-dom': 19.2.3(@types/react@19.2.7) + '@radix-ui/react-collapsible@1.1.12(@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-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-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-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3) + '@radix-ui/react-use-layout-effect': 1.1.1(@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-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)': dependencies: '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3) diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx new file mode 100644 index 0000000..b85b64a --- /dev/null +++ b/src/app/faqs/page.tsx @@ -0,0 +1,46 @@ +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" + +const accordionItems = [ + { + value: "item-1", + trigger: "Per le lauree le lezioni sono sospese? ", + content: "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", + }, + { + value: "item-2", + trigger: "Per le lauree le lezioni sono sospese? ", + content: "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", + }, + { + value: "item-3", + trigger: "Per le lauree le lezioni sono sospese? ", + content: "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", + }, + { + value: "item-4", + trigger: "Per le lauree le lezioni sono sospese? ", + content: "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", + }, + { + value: "item-5", + trigger: "Per le lauree le lezioni sono sospese? ", + content: "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", + }, +] + +export default function Home() { + return ( +
+
+ + {accordionItems.map((item) => ( + + {item.trigger} + {item.content} + + ))} + +
+
+ ) +} diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx new file mode 100644 index 0000000..b463cc4 --- /dev/null +++ b/src/components/ui/accordion.tsx @@ -0,0 +1,52 @@ +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import type * as React from "react" +import { FiChevronRight } from "react-icons/fi" +import { cn } from "@/lib/utils" + +function Accordion({ className, ...props }: React.ComponentProps) { + return +} + +function AccordionItem({ className, ...props }: React.ComponentProps) { + return ( + + ) +} + +function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { + return ( + + svg]:rotate-90", + className + )} + {...props} + > + {children} + + + + ) +} + +function AccordionContent({ className, children, ...props }: React.ComponentProps) { + return ( + +
{children}
+ + ) +} + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } From 7298b71dba972dfea0eacd6a6acb531e1553fbff Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 14 Apr 2026 17:42:58 +0200 Subject: [PATCH 2/4] feat: enhance AccordionItem with Glass component and update styles --- src/components/ui/accordion.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx index b463cc4..734c822 100644 --- a/src/components/ui/accordion.tsx +++ b/src/components/ui/accordion.tsx @@ -1,19 +1,24 @@ +"use client" + import * as AccordionPrimitive from "@radix-ui/react-accordion" import type * as React from "react" import { FiChevronRight } from "react-icons/fi" +import { Glass } from "@/components/glass" import { cn } from "@/lib/utils" function Accordion({ className, ...props }: React.ComponentProps) { return } -function AccordionItem({ className, ...props }: React.ComponentProps) { +function AccordionItem({ className, children, ...props }: React.ComponentProps) { return ( - + + + {children} + + ) } From 0e52470292ac84f3e3d3f64574461798be1caaf6 Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 14 Apr 2026 17:49:54 +0200 Subject: [PATCH 3/4] feat: add accordion animations and utility classes to globals.css --- src/app/faqs/page.tsx | 83 +++++++++++++++++---------------- src/components/ui/accordion.tsx | 4 +- src/styles/globals.css | 31 ++++++++++++ 3 files changed, 76 insertions(+), 42 deletions(-) diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx index b85b64a..0da13f6 100644 --- a/src/app/faqs/page.tsx +++ b/src/app/faqs/page.tsx @@ -1,46 +1,51 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" const accordionItems = [ - { - value: "item-1", - trigger: "Per le lauree le lezioni sono sospese? ", - content: "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", - }, - { - value: "item-2", - trigger: "Per le lauree le lezioni sono sospese? ", - content: "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", - }, - { - value: "item-3", - trigger: "Per le lauree le lezioni sono sospese? ", - content: "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", - }, - { - value: "item-4", - trigger: "Per le lauree le lezioni sono sospese? ", - content: "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", - }, - { - value: "item-5", - trigger: "Per le lauree le lezioni sono sospese? ", - content: "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", - }, + { + value: "item-1", + trigger: "Per le lauree le lezioni sono sospese? ", + content: + "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", + }, + { + value: "item-2", + trigger: "Per le lauree le lezioni sono sospese? ", + content: + "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", + }, + { + value: "item-3", + trigger: "Per le lauree le lezioni sono sospese? ", + content: + "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", + }, + { + value: "item-4", + trigger: "Per le lauree le lezioni sono sospese? ", + content: + "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", + }, + { + value: "item-5", + trigger: "Per le lauree le lezioni sono sospese? ", + content: + "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.", + }, ] export default function Home() { - return ( -
-
- - {accordionItems.map((item) => ( - - {item.trigger} - {item.content} - - ))} - -
-
- ) + return ( +
+
+ + {accordionItems.map((item) => ( + + {item.trigger} + {item.content} + + ))} + +
+
+ ) } diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx index 734c822..2d14b6a 100644 --- a/src/components/ui/accordion.tsx +++ b/src/components/ui/accordion.tsx @@ -13,9 +13,7 @@ function Accordion({ className, ...props }: React.ComponentProps) { return ( - + {children} diff --git a/src/styles/globals.css b/src/styles/globals.css index 9484dba..078e818 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -18,3 +18,34 @@ cursor: pointer; } } + +/* TODO: maybe move this somewhere else */ +@keyframes accordion-down { + from { + height: 0; + opacity: 0; + } + to { + height: var(--radix-accordion-content-height); + opacity: 1; + } +} + +@keyframes accordion-up { + from { + height: var(--radix-accordion-content-height); + opacity: 1; + } + to { + height: 0; + opacity: 0; + } +} + +@utility animate-accordion-down { + animation: accordion-down 0.2s ease-out; +} + +@utility animate-accordion-up { + animation: accordion-up 0.2s ease-out; +} From 8f924483d3c27253c154c50ce3961b4f78582a2f Mon Sep 17 00:00:00 2001 From: Bianca Date: Wed, 15 Apr 2026 11:01:47 +0200 Subject: [PATCH 4/4] feat: add accordion animations to animations.css and update globals.css --- src/styles/animations.css | 29 +++++++++++++++++++++++++++++ src/styles/globals.css | 32 +------------------------------- 2 files changed, 30 insertions(+), 31 deletions(-) create mode 100644 src/styles/animations.css diff --git a/src/styles/animations.css b/src/styles/animations.css new file mode 100644 index 0000000..95b7195 --- /dev/null +++ b/src/styles/animations.css @@ -0,0 +1,29 @@ +@keyframes accordion-down { + from { + height: 0; + opacity: 0; + } + to { + height: var(--radix-accordion-content-height); + opacity: 1; + } +} + +@keyframes accordion-up { + from { + height: var(--radix-accordion-content-height); + opacity: 1; + } + to { + height: 0; + opacity: 0; + } +} + +@utility animate-accordion-down { + animation: accordion-down 0.2s ease-out; +} + +@utility animate-accordion-up { + animation: accordion-up 0.2s ease-out; +} diff --git a/src/styles/globals.css b/src/styles/globals.css index 078e818..106db5a 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -3,6 +3,7 @@ @import "./figma.css"; @import "./sidebar.css"; @import "./charts.css"; +@import "./animations.css"; @custom-variant dark (&:is(.dark *)); @@ -18,34 +19,3 @@ cursor: pointer; } } - -/* TODO: maybe move this somewhere else */ -@keyframes accordion-down { - from { - height: 0; - opacity: 0; - } - to { - height: var(--radix-accordion-content-height); - opacity: 1; - } -} - -@keyframes accordion-up { - from { - height: var(--radix-accordion-content-height); - opacity: 1; - } - to { - height: 0; - opacity: 0; - } -} - -@utility animate-accordion-down { - animation: accordion-down 0.2s ease-out; -} - -@utility animate-accordion-up { - animation: accordion-up 0.2s ease-out; -}