From f53231e5ff409dda9d5ee5277d807b3e303b6428 Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 14 Apr 2026 11:21:34 +0200 Subject: [PATCH 01/12] feat: add CommunityNews component and update page layout --- src/app/page.tsx | 4 +- src/app/projects/page.tsx | 17 ++++++ src/components/projects/community-news.tsx | 67 ++++++++++++++++++++++ 3 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 src/app/projects/page.tsx create mode 100644 src/components/projects/community-news.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 690408f..c24ef89 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,6 +3,7 @@ import { FiFacebook, FiGithub, FiInstagram, FiLinkedin } from "react-icons/fi" import discord from "@/assets/icons/discord.svg" import telegram from "@/assets/icons/telegram.svg" import { CardMultipleIcons } from "@/components/card-multiple-icons" +import { CardSplit } from "@/components/card-split" import { AboutUs } from "@/components/home/about-us" import { Hero } from "@/components/home/hero" import { Materials } from "@/components/home/materials" @@ -13,7 +14,7 @@ export default function Home() { -
+
, @@ -24,6 +25,7 @@ export default function Home() { , ]} /> +
) diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx new file mode 100644 index 0000000..c225b5e --- /dev/null +++ b/src/app/projects/page.tsx @@ -0,0 +1,17 @@ + +import { AboutUs } from "@/components/home/about-us" +import { Hero } from "@/components/home/hero" +import { Materials } from "@/components/home/materials" +import { CommunityNews } from "@/components/projects/community-news" + +export default function Home() { + return ( +
+ + + + + +
+ ) +} diff --git a/src/components/projects/community-news.tsx b/src/components/projects/community-news.tsx new file mode 100644 index 0000000..5254e51 --- /dev/null +++ b/src/components/projects/community-news.tsx @@ -0,0 +1,67 @@ +import { FiUploadCloud } from "react-icons/fi" +import { CardIcon } from "@/components/card-icon" + +const communityCards = [ + { + title: "Title 1", + description: + "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + size: "sm", + href: "#", + }, + { + title: "Title 2", + description: + "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + size: "sm", + href: "#", + }, + { + title: "Title 3", + description: + "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + size: "sm", + href: "#", + }, + { + title: "Title 4", + description: + "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + size: "sm", + href: "#", + }, +] as const + +export function CommunityNews() { + return ( +
+
+

+ Projects +

+

Esplora e contribuisci ai progetti degli studenti

+
+ +
+
+

+ Le novità della community

+

+ {/* TODO a me sembra troppo piccolo*/} + Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico +

+
+
+ {/* TODO sostituire la card con la versione corretta */} + {communityCards.map((card) => ( + + ))} +
+
+
+ ) +} From 32fe53b638e34478f2a776e27e27ddd4b4153deb Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 14 Apr 2026 11:49:27 +0200 Subject: [PATCH 02/12] fix: biome --- src/app/projects/page.tsx | 18 +--- src/components/projects/community-news.tsx | 115 ++++++++++----------- 2 files changed, 62 insertions(+), 71 deletions(-) diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx index c225b5e..82903e1 100644 --- a/src/app/projects/page.tsx +++ b/src/app/projects/page.tsx @@ -1,17 +1,9 @@ - -import { AboutUs } from "@/components/home/about-us" -import { Hero } from "@/components/home/hero" -import { Materials } from "@/components/home/materials" import { CommunityNews } from "@/components/projects/community-news" export default function Home() { - return ( -
- - - - - -
- ) + return ( +
+ +
+ ) } diff --git a/src/components/projects/community-news.tsx b/src/components/projects/community-news.tsx index 5254e51..de7d56a 100644 --- a/src/components/projects/community-news.tsx +++ b/src/components/projects/community-news.tsx @@ -2,66 +2,65 @@ import { FiUploadCloud } from "react-icons/fi" import { CardIcon } from "@/components/card-icon" const communityCards = [ - { - title: "Title 1", - description: - "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", - icon: FiUploadCloud, - size: "sm", - href: "#", - }, - { - title: "Title 2", - description: - "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", - icon: FiUploadCloud, - size: "sm", - href: "#", - }, - { - title: "Title 3", - description: - "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", - icon: FiUploadCloud, - size: "sm", - href: "#", - }, - { - title: "Title 4", - description: - "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", - icon: FiUploadCloud, - size: "sm", - href: "#", - }, + { + title: "Title 1", + description: + "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + size: "sm", + href: "#", + }, + { + title: "Title 2", + description: + "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + size: "sm", + href: "#", + }, + { + title: "Title 3", + description: + "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + size: "sm", + href: "#", + }, + { + title: "Title 4", + description: + "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + size: "sm", + href: "#", + }, ] as const export function CommunityNews() { - return ( -
-
-

- Projects -

-

Esplora e contribuisci ai progetti degli studenti

-
+ return ( +
+
+

+ Projects +

+

Esplora e contribuisci ai progetti degli studenti

+
-
-
-

- Le novità della community

-

- {/* TODO a me sembra troppo piccolo*/} - Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico -

-
-
- {/* TODO sostituire la card con la versione corretta */} - {communityCards.map((card) => ( - - ))} -
-
-
- ) +
+
+

Le novità della community

+

+ {/* TODO a me sembra troppo piccolo*/} + Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico +

+
+
+ {/* TODO sostituire la card con la versione corretta */} + {communityCards.map((card) => ( + + ))} +
+
+
+ ) } From 1c2ba01e85ae2bc5c7a2d0dcd9ced8532aafff19 Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 14 Apr 2026 12:15:08 +0200 Subject: [PATCH 03/12] fix: update layout styles for CommunityNews component --- src/components/projects/community-news.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/projects/community-news.tsx b/src/components/projects/community-news.tsx index de7d56a..e009477 100644 --- a/src/components/projects/community-news.tsx +++ b/src/components/projects/community-news.tsx @@ -38,7 +38,7 @@ const communityCards = [ export function CommunityNews() { return ( -
+

Projects @@ -46,7 +46,7 @@ export function CommunityNews() {

Esplora e contribuisci ai progetti degli studenti

-
+

Le novità della community

From e432d53e2c464c102a4ab224c5a082c7f6e6e94b Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 14 Apr 2026 12:25:15 +0200 Subject: [PATCH 04/12] fix: adjust CommunityNews section to ensure full height display --- src/components/projects/community-news.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/projects/community-news.tsx b/src/components/projects/community-news.tsx index e009477..6e125a8 100644 --- a/src/components/projects/community-news.tsx +++ b/src/components/projects/community-news.tsx @@ -38,7 +38,7 @@ const communityCards = [ export function CommunityNews() { return ( -

+

Projects From 4eb7ec3b7a7e614698659821ec435e11dd284cad Mon Sep 17 00:00:00 2001 From: Bianca Date: Thu, 16 Apr 2026 14:45:09 +0200 Subject: [PATCH 05/12] fix: update padding in CommunityNews section for improved layout --- src/components/projects/community-news.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/projects/community-news.tsx b/src/components/projects/community-news.tsx index 6e125a8..801a508 100644 --- a/src/components/projects/community-news.tsx +++ b/src/components/projects/community-news.tsx @@ -38,7 +38,7 @@ const communityCards = [ export function CommunityNews() { return ( -
+

Projects @@ -50,7 +50,6 @@ export function CommunityNews() {

Le novità della community

- {/* TODO a me sembra troppo piccolo*/} Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico

From a0aa35b5697c9c15422d7dfaf88217aa1426e85c Mon Sep 17 00:00:00 2001 From: Bianca Date: Wed, 22 Apr 2026 23:37:32 +0200 Subject: [PATCH 06/12] feat: update community news component and improve gradient icon handling --- .gitignore | 5 ++- src/components/gradient-icon.tsx | 4 +-- src/components/projects/community-news.tsx | 36 +++++++++------------- src/components/ui/card.tsx | 19 ++---------- 4 files changed, 24 insertions(+), 40 deletions(-) diff --git a/.gitignore b/.gitignore index 72986d5..c2e19a5 100644 --- a/.gitignore +++ b/.gitignore @@ -47,4 +47,7 @@ yarn-error.log* *.tsbuildinfo # idea files -.idea \ No newline at end of file +.idea + +# codex +.codex \ No newline at end of file diff --git a/src/components/gradient-icon.tsx b/src/components/gradient-icon.tsx index 0b49c7f..34647eb 100644 --- a/src/components/gradient-icon.tsx +++ b/src/components/gradient-icon.tsx @@ -1,6 +1,6 @@ import { type FunctionComponent, type SVGProps, useId } from "react" -export type GradientIconType = FunctionComponent> +export type GradientIconType = FunctionComponent & { size?: string }> type GradientIconProps = { icon: GradientIconType @@ -20,7 +20,7 @@ export function GradientIcon({ icon: Icon, className }: GradientIconProps) { - + diff --git a/src/components/projects/community-news.tsx b/src/components/projects/community-news.tsx index 6e125a8..66c3a99 100644 --- a/src/components/projects/community-news.tsx +++ b/src/components/projects/community-news.tsx @@ -1,38 +1,34 @@ -import { FiUploadCloud } from "react-icons/fi" -import { CardIcon } from "@/components/card-icon" +import { FiCrop } from "react-icons/fi" +import { CardCaption } from "../card-caption" const communityCards = [ { title: "Title 1", - description: + caption: "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", - icon: FiUploadCloud, - size: "sm", - href: "#", + icon: FiCrop, + iconPosition: "right", }, { title: "Title 2", - description: + caption: "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", - icon: FiUploadCloud, - size: "sm", - href: "#", + icon: FiCrop, + iconPosition: "right", }, { title: "Title 3", - description: + caption: "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", - icon: FiUploadCloud, - size: "sm", - href: "#", + icon: FiCrop, + iconPosition: "right", }, { title: "Title 4", - description: + caption: "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", - icon: FiUploadCloud, - size: "sm", - href: "#", + icon: FiCrop, + iconPosition: "right", }, ] as const @@ -50,14 +46,12 @@ export function CommunityNews() {

Le novità della community

- {/* TODO a me sembra troppo piccolo*/} Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico

- {/* TODO sostituire la card con la versione corretta */} {communityCards.map((card) => ( - + ))}

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index 4161c83..0bb4efc 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -1,8 +1,9 @@ -import * as React from "react" +import type * as React from "react" import type { IconType } from "react-icons" import { cn } from "@/lib/utils" import { CardHoverBackground } from "../card-icon/hover-background" import { Glass } from "../glass" +import { GradientIcon } from "../gradient-icon" import { Button } from "./button" function Card({ @@ -65,28 +66,14 @@ function CardAction({ gradient = true, ...props }: React.ComponentProps<"div"> & { icon: IconType; iconSize?: "small" | "normal" | "large"; gradient?: boolean }) { - const gradientId = React.useId() - return (
- {gradient && ( - - )} - +
) } From 7d44b3c39d7648ca57cd0bf1e8c845000d419d96 Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 12 May 2026 11:05:35 +0200 Subject: [PATCH 07/12] feat: implement carousel component and mock data --- package.json | 3 +- pnpm-lock.yaml | 28 ++++ src/app/page.tsx | 3 + src/components/home/carousel-mock.tsx | 53 +++++++ src/components/ui/carousel.tsx | 195 ++++++++++++++++++++++++++ 5 files changed, 281 insertions(+), 1 deletion(-) create mode 100644 src/components/home/carousel-mock.tsx create mode 100644 src/components/ui/carousel.tsx diff --git a/package.json b/package.json index fa65528..295ce78 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,10 @@ "check:fix": "biome check --write --unsafe" }, "dependencies": { + "@radix-ui/react-accordion": "^1.2.12", "@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", "@radix-ui/react-tabs": "^1.1.13", "@t3-oss/env-nextjs": "^0.13.10", "@tanstack/react-table": "^8.21.3", @@ -25,6 +25,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.1.1", + "embla-carousel-react": "^8.6.0", "geist": "^1.5.1", "next": "^15.5.15", "next-themes": "^0.4.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 87419b8..f9d96ab 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ importers: cmdk: specifier: 1.1.1 version: 1.1.1(@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) + embla-carousel-react: + specifier: ^8.6.0 + version: 8.6.0(react@19.2.3) geist: specifier: ^1.5.1 version: 1.5.1(next@15.5.15(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)) @@ -1347,6 +1350,19 @@ packages: detect-node-es@1.1.0: resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} + embla-carousel-react@8.6.0: + resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==} + peerDependencies: + react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc + + embla-carousel-reactive-utils@8.6.0: + resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==} + peerDependencies: + embla-carousel: 8.6.0 + + embla-carousel@8.6.0: + resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==} + enhanced-resolve@5.18.4: resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==} engines: {node: '>=10.13.0'} @@ -2794,6 +2810,18 @@ snapshots: detect-node-es@1.1.0: {} + embla-carousel-react@8.6.0(react@19.2.3): + dependencies: + embla-carousel: 8.6.0 + embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0) + react: 19.2.3 + + embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0): + dependencies: + embla-carousel: 8.6.0 + + embla-carousel@8.6.0: {} + enhanced-resolve@5.18.4: dependencies: graceful-fs: 4.2.11 diff --git a/src/app/page.tsx b/src/app/page.tsx index 690408f..189cf53 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,6 +4,7 @@ import discord from "@/assets/icons/discord.svg" import telegram from "@/assets/icons/telegram.svg" import { CardMultipleIcons } from "@/components/card-multiple-icons" import { AboutUs } from "@/components/home/about-us" +import { CarouselMock } from "@/components/home/carousel-mock" import { Hero } from "@/components/home/hero" import { Materials } from "@/components/home/materials" @@ -12,6 +13,8 @@ export default function Home() {
+ {/* TODO: delete this when merging */} +
+

+ PoliNetwork +

+ + + + {mockCards.map((card) => ( + +
+ +
+ + ))} + + + +
+ ) +} diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx new file mode 100644 index 0000000..b771efc --- /dev/null +++ b/src/components/ui/carousel.tsx @@ -0,0 +1,195 @@ +"use client" + +import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react" +import * as React from "react" +import { Button } from "@/components/ui/button" +import { cn } from "@/lib/utils" + +type CarouselApi = UseEmblaCarouselType[1] +type UseCarouselParameters = Parameters +type CarouselOptions = UseCarouselParameters[0] +type CarouselPlugin = UseCarouselParameters[1] + +type CarouselProps = { + opts?: CarouselOptions + plugins?: CarouselPlugin + orientation?: "horizontal" | "vertical" + setApi?: (api: CarouselApi) => void +} + +type CarouselContextProps = { + carouselRef: ReturnType[0] + api: ReturnType[1] + scrollPrev: () => void + scrollNext: () => void + canScrollPrev: boolean + canScrollNext: boolean + selectedIndex: number + scrollSnaps: number[] +} & CarouselProps + +const CarouselContext = React.createContext(null) + +function useCarousel() { + const context = React.useContext(CarouselContext) + + if (!context) { + throw new Error("useCarousel must be used within a ") + } + + return context +} + +function Carousel({ + orientation = "horizontal", + opts, + setApi, + plugins, + className, + children, + ...props +}: React.ComponentProps<"div"> & CarouselProps) { + const [carouselRef, api] = useEmblaCarousel( + { + ...opts, + axis: orientation === "horizontal" ? "x" : "y", + }, + plugins + ) + const [canScrollPrev, setCanScrollPrev] = React.useState(false) + const [canScrollNext, setCanScrollNext] = React.useState(false) + const [selectedIndex, setSelectedIndex] = React.useState(0) + const [scrollSnaps, setScrollSnaps] = React.useState([]) + + const onSelect = React.useCallback((api: CarouselApi) => { + if (!api) return + setCanScrollPrev(api.canScrollPrev()) + setCanScrollNext(api.canScrollNext()) + setSelectedIndex(api.selectedScrollSnap()) + setScrollSnaps(api.scrollSnapList()) + }, []) + + const scrollPrev = React.useCallback(() => { + api?.scrollPrev() + }, [api]) + + const scrollNext = React.useCallback(() => { + api?.scrollNext() + }, [api]) + + const handleKeyDown = React.useCallback( + (event: React.KeyboardEvent) => { + if (event.key === "ArrowLeft") { + event.preventDefault() + scrollPrev() + } else if (event.key === "ArrowRight") { + event.preventDefault() + scrollNext() + } + }, + [scrollPrev, scrollNext] + ) + + React.useEffect(() => { + if (!api || !setApi) return + setApi(api) + }, [api, setApi]) + + React.useEffect(() => { + if (!api) return + onSelect(api) + api.on("reInit", onSelect) + api.on("select", onSelect) + + return () => { + api?.off("select", onSelect) + } + }, [api, onSelect]) + + return ( + +
+ {children} +
+ + ) +} + +function CarouselContent({ className, ...props }: React.ComponentProps<"div">) { + const { carouselRef, orientation } = useCarousel() + + return ( +
+
+
+ ) +} + +function CarouselItem({ className, ...props }: React.ComponentProps<"fieldset">) { + const { orientation } = useCarousel() + + return ( +
+ ) +} + +function CarouselDots({ className, ...props }: React.ComponentProps<"div">) { + const { api, scrollSnaps, selectedIndex } = useCarousel() + + if (scrollSnaps.length <= 1) return null + + return ( +
+ {scrollSnaps.map((scrollSnap, index) => ( + + )) + } +
+ ) +} + +export { type CarouselApi, Carousel, CarouselContent, CarouselDots, CarouselItem } From b863417703984f6e45d249ea3e342b9203644339 Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 12 May 2026 11:12:46 +0200 Subject: [PATCH 08/12] refactor: simplify section and div elements in carousel component --- src/components/home/carousel-mock.tsx | 10 +++------- src/components/ui/carousel.tsx | 18 ++++-------------- 2 files changed, 7 insertions(+), 21 deletions(-) diff --git a/src/components/home/carousel-mock.tsx b/src/components/home/carousel-mock.tsx index 23d701a..c4f9758 100644 --- a/src/components/home/carousel-mock.tsx +++ b/src/components/home/carousel-mock.tsx @@ -16,19 +16,15 @@ const mockCards = [ }, { title: "WiFiLinux", - caption: - "Scarica ed esegui lo script Python per attivare la connessione permanente al WiFi Polimi.", - + caption: "Scarica ed esegui lo script Python per attivare la connessione permanente al WiFi Polimi.", }, { title: "The TOL Project", - caption: - "Un simulatore gratuito del test di ammissione per le aspiranti matricole di Ingegneria del PoliMi.", - + caption: "Un simulatore gratuito del test di ammissione per le aspiranti matricole di Ingegneria del PoliMi.", }, ] as const -// TODO: delete this when merging +// TODO: delete this when merging export function CarouselMock() { return (
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx index b771efc..7d1e664 100644 --- a/src/components/ui/carousel.tsx +++ b/src/components/ui/carousel.tsx @@ -121,12 +121,7 @@ function Carousel({ scrollSnaps, }} > -
+
{children}
@@ -162,11 +157,7 @@ function CarouselDots({ className, ...props }: React.ComponentProps<"div">) { if (scrollSnaps.length <= 1) return null return ( -
+
{scrollSnaps.map((scrollSnap, index) => ( - )) - } -
+ ))} +
) } From 623b9bf29207ad0a843eed33931b43d9c8f76714 Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 12 May 2026 11:40:31 +0200 Subject: [PATCH 09/12] feat: enhance keyboard navigation for vertical carousel orientation --- src/components/ui/carousel.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx index 7d1e664..5b54409 100644 --- a/src/components/ui/carousel.tsx +++ b/src/components/ui/carousel.tsx @@ -79,7 +79,15 @@ function Carousel({ const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { - if (event.key === "ArrowLeft") { + if (orientation === "vertical") { + if (event.key === "ArrowUp") { + event.preventDefault() + scrollPrev() + } else if (event.key === "ArrowDown") { + event.preventDefault() + scrollNext() + } + } else if (event.key === "ArrowLeft") { event.preventDefault() scrollPrev() } else if (event.key === "ArrowRight") { @@ -87,7 +95,7 @@ function Carousel({ scrollNext() } }, - [scrollPrev, scrollNext] + [orientation, scrollPrev, scrollNext] ) React.useEffect(() => { @@ -102,7 +110,8 @@ function Carousel({ api.on("select", onSelect) return () => { - api?.off("select", onSelect) + api.off("reInit", onSelect) + api.off("select", onSelect) } }, [api, onSelect]) @@ -162,7 +171,7 @@ function CarouselDots({ className, ...props }: React.ComponentProps<"div">) {
-
+

Le novità della community