Initial commit

2025-12-27 18:44:22 +02:00
commit 68b263cb87
307 changed files with 62716 additions and 0 deletions
--- a/src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx
+++ b/src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { memo, Children, cloneElement, isValidElement, useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { EmblaCarouselType } from "embla-carousel";
+import CardStackTextBox from "../../CardStackTextBox";
+import { cls } from "@/lib/utils";
+import { FullWidthCarouselProps } from "../../types";
+
+const FullWidthCarousel = ({
+    children,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout = "default",
+    useInvertedBackground,
+    className = "",
+    containerClassName = "",
+    carouselClassName = "",
+    dotsClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel = "Carousel section",
+}: FullWidthCarouselProps) => {
+    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "center" });
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const childrenArray = Children.toArray(children);
+
+    const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+        setSelectedIndex(emblaApi.selectedScrollSnap());
+    }, []);
+
+    const scrollTo = useCallback(
+        (index: number) => {
+            if (!emblaApi) return;
+            emblaApi.scrollTo(index);
+        },
+        [emblaApi]
+    );
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onSelect(emblaApi);
+        emblaApi.on("select", onSelect).on("reInit", onSelect);
+
+        return () => {
+            emblaApi.off("select", onSelect).off("reInit", onSelect);
+        };
+    }, [emblaApi, onSelect]);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        const autoplay = setInterval(() => {
+            emblaApi.scrollNext();
+        }, 5000);
+
+        return () => clearInterval(autoplay);
+    }, [emblaApi]);
+
+    return (
+        <section
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+            aria-label={ariaLabel}
+        >
+            <div className={cls("w-full mx-auto flex flex-col gap-6", containerClassName)}>
+                <div className="w-content-width mx-auto">
+                    <CardStackTextBox
+                        title={title}
+                        titleSegments={titleSegments}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        buttons={buttons}
+                        textboxLayout={textboxLayout}
+                        useInvertedBackground={useInvertedBackground}
+                        textBoxClassName={textBoxClassName}
+                        titleClassName={titleClassName}
+                        titleImageWrapperClassName={titleImageWrapperClassName}
+                        titleImageClassName={titleImageClassName}
+                        descriptionClassName={descriptionClassName}
+                        tagClassName={tagClassName}
+                        buttonContainerClassName={buttonContainerClassName}
+                        buttonClassName={buttonClassName}
+                        buttonTextClassName={buttonTextClassName}
+                    />
+                </div>
+
+                <div className="w-full">
+                    <div
+                        className={cls(
+                            "overflow-hidden w-full relative z-10",
+                            carouselClassName
+                        )}
+                        ref={emblaRef}
+                    >
+                        <div className="flex w-full">
+                            {Children.map(childrenArray, (child, index) => (
+                                <div
+                                    key={index}
+                                    className="flex-none w-70 mr-6"
+                                >
+                                    {isValidElement(child)
+                                        ? cloneElement(child, { isActive: selectedIndex === index } as Record<string, unknown>)
+                                        : child}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+                <div className={cls("flex items-center justify-center gap-2", dotsClassName)}>
+                    {childrenArray.map((_, index) => (
+                        <button
+                            key={index}
+                            type="button"
+                            onClick={() => scrollTo(index)}
+                            className={cls(
+                                "relative cursor-pointer h-2 rounded-full bg-accent transition-all duration-300",
+                                selectedIndex === index
+                                    ? "w-8 opacity-100"
+                                    : "w-2 opacity-20"
+                            )}
+                            aria-label={`Go to slide ${index + 1}`}
+                            aria-current={selectedIndex === index}
+                        />
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+FullWidthCarousel.displayName = "FullWidthCarousel";
+
+export default memo(FullWidthCarousel);