From e7ea6b08defc58ce7b8642c1965d0cf8922b41a4 Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 14 Apr 2026 12:17:17 +0200 Subject: [PATCH 1/7] feat: add Collection component and integrate into Home page --- src/app/projects/page.tsx | 9 +++ src/components/projects/collection.tsx | 107 +++++++++++++++++++++++++ 2 files changed, 116 insertions(+) create mode 100644 src/app/projects/page.tsx create mode 100644 src/components/projects/collection.tsx diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx new file mode 100644 index 0000000..fae4bab --- /dev/null +++ b/src/app/projects/page.tsx @@ -0,0 +1,9 @@ +import { Collection } from "@/components/projects/collection" + +export default function Home() { + return ( +
+ +
+ ) +} diff --git a/src/components/projects/collection.tsx b/src/components/projects/collection.tsx new file mode 100644 index 0000000..ba1fc7e --- /dev/null +++ b/src/components/projects/collection.tsx @@ -0,0 +1,107 @@ +import { FiArrowDown, FiSearch, FiUploadCloud } from "react-icons/fi" +import { CardIcon } from "@/components/card-icon" +import { Button } from "../ui/button" +import { Input } from "../ui/input" + +// TODO da sostituire con dati veri +const collectionCards = [ + { + 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 5", + 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 6", + 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 7", + description: + "description: Lorem ipsum dolor sit amet, consectet ur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + size: "sm", + href: "#", + }, + { + title: "Title 8", + 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 Collection() { + return ( +
+
+

Esplora la raccolta completa dei progetti

+
+ } + type="text" + placeholder="Search by name" + aria-label="Search by name" + containerClassName="max-w-xl" + className="typo-body-medium" + /> +
+
+ +
+
+ {/* TODO sostituire la card con la versione corretta */} + {collectionCards.map((card) => ( + + ))} +
+
+ +
+
+
+ ) +} From f83385effbbdf7c6368b0025f8ad2568cf1d592c Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 14 Apr 2026 12:32:03 +0200 Subject: [PATCH 2/7] fix: adjust min-height style for Collection component section --- src/components/projects/collection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/projects/collection.tsx b/src/components/projects/collection.tsx index ba1fc7e..6bd547a 100644 --- a/src/components/projects/collection.tsx +++ b/src/components/projects/collection.tsx @@ -73,7 +73,7 @@ const collectionCards = [ export function Collection() { return ( -
+

Esplora la raccolta completa dei progetti

From 7d44b3c39d7648ca57cd0bf1e8c845000d419d96 Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 12 May 2026 11:05:35 +0200 Subject: [PATCH 3/7] 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 4/7] 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 5/7] 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">) {
-
+ +
+ + + {collectionCards.map((card) => ( + +
+ +
+ + ))} + + + +
+ ) } From b464bc4e4273988fa58a69c67b713dc89d17804c Mon Sep 17 00:00:00 2001 From: Bianca Date: Tue, 12 May 2026 13:10:25 +0200 Subject: [PATCH 7/7] fix: remove unnecessary space in section closing tag --- src/components/projects/collection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/projects/collection.tsx b/src/components/projects/collection.tsx index ff8f443..81221e0 100644 --- a/src/components/projects/collection.tsx +++ b/src/components/projects/collection.tsx @@ -110,6 +110,6 @@ export function Collection() { - + ) }