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 */} +
+ +
+ ) +} diff --git a/src/components/home/carousel-mock.tsx b/src/components/home/carousel-mock.tsx new file mode 100644 index 0000000..c4f9758 --- /dev/null +++ b/src/components/home/carousel-mock.tsx @@ -0,0 +1,49 @@ +"use client" + +import { CardCaption } from "@/components/card-caption" +import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel" + +const mockCards = [ + { + title: "WeBeepSync", + caption: + "WeBeep Sync è una semplice app, user-friendly e senza compromessi che serve per tenere sincronizzati tutti i tuoi file di WeBeep.", + }, + { + title: "PolimiSchedule", + caption: + "Genera un file iCalendar (.ics) a partire dal formato testuale dell’Orario delle lezioni. Possibilità di importare su Google Calendar.", + }, + { + title: "WiFiLinux", + 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.", + }, +] as const + +// TODO: delete this when merging +export function CarouselMock() { + return ( +
+

+ PoliNetwork +

+ + + + {mockCards.map((card) => ( + +
+ +
+ + ))} + + + +
+ ) +} diff --git a/src/components/projects/deprecated.tsx b/src/components/projects/deprecated.tsx new file mode 100644 index 0000000..ebff0a9 --- /dev/null +++ b/src/components/projects/deprecated.tsx @@ -0,0 +1,80 @@ +import { FiArrowDown, FiUploadCloud } from "react-icons/fi" +import { CardCaption } from "../card-caption" +import { Button } from "../ui/button" +import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel" + +const communityCards = [ + { + title: "Title 1", + caption: + "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + href: "#", + }, + { + title: "Title 2", + caption: + "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + href: "#", + }, + { + title: "Title 3", + caption: + "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + href: "#", + }, + { + title: "Title 4", + caption: + "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.", + icon: FiUploadCloud, + href: "#", + }, +] as const + +export function Deprecated() { + return ( +
+
+
+

Progetti deprecati

+

+ Qui raccogliamo i progetti non più aggiornati o attivi.
+ Puoi contribuire a riportarli in vita, migliorarli o usarli come base per nuove idee. +

+
+ +
+
+ {communityCards.map((card) => ( + + ))} +
+
+ +
+
+ +
+ + + {communityCards.map((card) => ( + +
+ +
+ + ))} + + + +
+
+
+ ) +} diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx new file mode 100644 index 0000000..5b54409 --- /dev/null +++ b/src/components/ui/carousel.tsx @@ -0,0 +1,194 @@ +"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 (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") { + event.preventDefault() + scrollNext() + } + }, + [orientation, 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("reInit", onSelect) + 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 }