Merged in feat/SW-1542-carousel-functionality (pull request #1311)

feat(SW-1542): Carousel component * feat(SW-1542): add Embla Carousel component and use in CarouselCards * fix(SW-1542): remove max-width constraint for card on ipad * fix(SW-1542): Add padding to start page content container * refactor(SW-1542): Improve Embla Carousel type imports * refactor(SW-1542): Remove unnecessary carousel wrapper div * refactor(SW-1542): Modularize Carousel component structure * refactor(SW-1542): Remove carousel dots display * feat(SW-1542): Add carousel dots navigation * refactor(SW-1542): Update Carousel component styling and types * refactor(SW-1542): Remove uneeded useCallback from Carousel navigation methods * refactor(SW-1542): Modify CarouselContextProps type to exclude className * refactor(SW-1542): Optimize React imports in Carousel components * refactor(SW-1542): Consolidate Carousel component and remove CarouselRoot * refactor(SW-1542): Update Carousel navigation methods to use function-based scroll checks * refactor(SW-1542): Add explicit children prop support to CarouselContent component * refactor(SW-1542): Add children prop support to CarouselItem component Approved-by: Christian Andolf
2025-02-14 10:53:14 +00:00
parent 224a41ec74
commit 38cce4b136
14 changed files with 441 additions and 23 deletions
@@ -0,0 +1,45 @@
+"use client"
+
+import { cx } from "class-variance-authority"
+
+import { ArrowRightIcon } from "@/components/Icons"
+
+import { useCarousel } from "./CarouselContext"
+
+import styles from "./carousel.module.css"
+
+import type { CarouselButtonProps } from "./types"
+
+export function CarouselPrevious({ className, ...props }: CarouselButtonProps) {
+  const { scrollPrev, canScrollPrev } = useCarousel()
+
+  if (!canScrollPrev()) return null
+
+  return (
+    <button
+      className={cx(styles.button, styles.buttonPrev, className)}
+      onClick={scrollPrev}
+      aria-label="Previous slide"
+      {...props}
+    >
+      <ArrowRightIcon color="burgundy" className={styles.prevIcon} />
+    </button>
+  )
+}
+
+export function CarouselNext({ className, ...props }: CarouselButtonProps) {
+  const { scrollNext, canScrollNext } = useCarousel()
+
+  if (!canScrollNext()) return null
+
+  return (
+    <button
+      className={cx(styles.button, styles.buttonNext, className)}
+      onClick={scrollNext}
+      aria-label="Next slide"
+      {...props}
+    >
+      <ArrowRightIcon color="burgundy" />
+    </button>
+  )
+}