Add carousel for navigating images in the sign up modal

src/interface/web/app/components/loginPrompt/loginPrompt.tsx

@@ -4,6 +4,7 @@ import styles from "./loginPrompt.module.css";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import Autoplay from "embla-carousel-autoplay";
 import {
     ArrowLeft,
     ArrowsClockwise,
@@ -11,14 +12,20 @@ import {
     PaperPlaneTilt,
     PencilSimple,
     Spinner,
-    CaretLeft,
-    CaretRight,
 } from "@phosphor-icons/react";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
 import { GoogleSignIn } from "./GoogleSignIn";
 import { Drawer, DrawerContent } from "@/components/ui/drawer";
+import {
+    Carousel,
+    CarouselContent,
+    CarouselItem,
+    CarouselNext,
+    CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Card, CardContent } from "@/components/ui/card";
 
 export interface LoginPromptProps {
     loginRedirectMessage: string;
@@ -46,19 +53,6 @@ export default function LoginPrompt(props: LoginPromptProps) {
     const [checkEmail, setCheckEmail] = useState(false);
     const [recheckEmail, setRecheckEmail] = useState(false);
 
-    const [currentTip, setCurrentTip] = useState(0);
-    const [autoRotate, setAutoRotate] = useState(true);
-
-    // Add these handler functions in your component
-    const nextSlide = () => {
-        setCurrentTip((prev) => (prev + 1) % tips.length);
-        setAutoRotate(false);
-    };
-    const prevSlide = () => {
-        setCurrentTip((prev) => (prev - 1 + tips.length) % tips.length);
-        setAutoRotate(false);
-    };
-
     useEffect(() => {
         const google = (window as any).google;
 
@@ -121,22 +115,6 @@ export default function LoginPrompt(props: LoginPromptProps) {
         });
     };
 
-    const tips = [
-        { src: "/documents_tip.png", alt: "Documents tip" },
-        { src: "/personalize_tip.png", alt: "Personalize tip" },
-        { src: "/automate_tip.png", alt: "Automate tip" },
-    ];
-
-    useEffect(() => {
-        if (!autoRotate) return;
-
-        const timer = setInterval(() => {
-            setCurrentTip((prev) => (prev + 1) % tips.length);
-        }, 3000); // Rotate every 3 seconds
-
-        return () => clearInterval(timer);
-    }, [autoRotate]);
-
     function handleMagicLinkSignIn() {
         fetch("/auth/magic", {
             method: "POST",
@@ -183,10 +161,6 @@ export default function LoginPrompt(props: LoginPromptProps) {
                         )}
                         {!useEmailSignIn && (
                             <MainSignInContext
-                                tips={tips}
-                                currentTip={currentTip}
-                                nextSlide={nextSlide}
-                                prevSlide={prevSlide}
                                 handleGoogleScriptLoad={handleGoogleScriptLoad}
                                 handleGoogleSignIn={handleGoogleSignIn}
                                 isLoading={isLoading}
@@ -221,10 +195,6 @@ export default function LoginPrompt(props: LoginPromptProps) {
                     )}
                     {!useEmailSignIn && (
                         <MainSignInContext
-                            tips={tips}
-                            currentTip={currentTip}
-                            nextSlide={nextSlide}
-                            prevSlide={prevSlide}
                             handleGoogleScriptLoad={handleGoogleScriptLoad}
                             handleGoogleSignIn={handleGoogleSignIn}
                             isLoading={isLoading}
@@ -327,10 +297,6 @@ function EmailSignInContext({
 }
 
 function MainSignInContext({
-    tips,
-    currentTip,
-    nextSlide,
-    prevSlide,
     handleGoogleScriptLoad,
     handleGoogleSignIn,
     isLoading,
@@ -338,10 +304,6 @@ function MainSignInContext({
     setUseEmailSignIn,
     isMobileWidth,
 }: {
-    tips: { src: string; alt: string }[];
-    currentTip: number;
-    nextSlide: () => void;
-    prevSlide: () => void;
     handleGoogleScriptLoad: () => void;
     handleGoogleSignIn: () => void;
     isLoading: boolean;
@@ -349,37 +311,43 @@ function MainSignInContext({
     setUseEmailSignIn: (useEmailSignIn: boolean) => void;
     isMobileWidth: boolean;
 }) {
+    const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
+
+    const tips = [
+        { src: "/documents_tip.png", alt: "Documents tip" },
+        { src: "/personalize_tip.png", alt: "Personalize tip" },
+        { src: "/automate_tip.png", alt: "Automate tip" },
+    ];
+
     return (
         <div className="flex flex-col gap-4 p-4">
             {!isMobileWidth && (
-                <div className="relative w-full h-80 overflow-hidden rounded-t-lg">
+                <Carousel
+                    plugins={[plugin.current]}
+                    className="w-full"
+                    onMouseEnter={plugin.current.stop}
+                    onMouseLeave={plugin.current.reset}
+                >
+                    <CarouselContent>
                         {tips.map((tip, index) => (
+                            <CarouselItem key={index}>
+                                <div className="p-1">
+                                    <Card>
+                                        <CardContent className="flex items-center justify-center rounded-b-none rounded-t-lg p-0">
                                             <img
-                            key={tip.src}
                                                 src={tip.src}
                                                 alt={tip.alt}
-                            className={`absolute w-full h-full object-cover transition-all duration-500 ease-in-out ${
+                                                className="w-full h-auto"
-                                index === currentTip
-                                    ? "opacity-100 translate-x-0"
-                                    : index < currentTip
-                                      ? "opacity-0 -translate-x-full"
-                                      : "opacity-0 translate-x-full"
-                            }`}
                                             />
-                    ))}
+                                        </CardContent>
-                    <Button
+                                    </Card>
-                        onClick={prevSlide}
-                        className="absolute left-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white/90 rounded-full p-2 shadow-lg"
-                    >
-                        <CaretLeft className="text-black h-6 w-6" />
-                    </Button>
-                    <Button
-                        onClick={nextSlide}
-                        className="absolute right-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white/90 rounded-full p-2 shadow-lg"
-                    >
-                        <CaretRight className="text-black h-6 w-6" />
-                    </Button>
                                 </div>
+                            </CarouselItem>
+                        ))}
+                    </CarouselContent>
+                    <CarouselPrevious className="absolute left-0" />
+                    <CarouselNext className="absolute right-0" />
+                </Carousel>
             )}
             <div className="flex flex-col gap-4 text-center p-4">
                 <div className="text-center font-bold text-lg">
@@ -436,7 +404,7 @@ function MainSignInContext({
                 </Button>
 
                 <Button
-                    variant="default"
+                    variant="secondary"
                     className="w-[300px] p-6 flex gap-2 items-center justify-center"
                     onClick={() => {
                         setUseEmailSignIn(true);

src/interface/web/components/ui/carousel.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+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<typeof useEmblaCarousel>[0];
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+    const context = React.useContext(CarouselContext);
+
+    if (!context) {
+        throw new Error("useCarousel must be used within a <Carousel />");
+    }
+
+    return context;
+}
+
+const Carousel = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+        {
+            ...opts,
+            axis: orientation === "horizontal" ? "x" : "y",
+        },
+        plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+        if (!api) {
+            return;
+        }
+
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+        api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+        api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            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 (
+        <CarouselContext.Provider
+            value={{
+                carouselRef,
+                api: api,
+                opts,
+                orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+                scrollPrev,
+                scrollNext,
+                canScrollPrev,
+                canScrollNext,
+            }}
+        >
+            <div
+                ref={ref}
+                onKeyDownCapture={handleKeyDown}
+                className={cn("relative", className)}
+                role="region"
+                aria-roledescription="carousel"
+                {...props}
+            >
+                {children}
+            </div>
+        </CarouselContext.Provider>
+    );
+});
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => {
+        const { carouselRef, orientation } = useCarousel();
+
+        return (
+            <div ref={carouselRef} className="overflow-hidden">
+                <div
+                    ref={ref}
+                    className={cn(
+                        "flex",
+                        orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+                        className,
+                    )}
+                    {...props}
+                />
+            </div>
+        );
+    },
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => {
+        const { orientation } = useCarousel();
+
+        return (
+            <div
+                ref={ref}
+                role="group"
+                aria-roledescription="slide"
+                className={cn(
+                    "min-w-0 shrink-0 grow-0 basis-full",
+                    orientation === "horizontal" ? "pl-4" : "pt-4",
+                    className,
+                )}
+                {...props}
+            />
+        );
+    },
+);
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+    ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+        const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+        return (
+            <Button
+                ref={ref}
+                variant={variant}
+                size={size}
+                className={cn(
+                    "absolute  h-8 w-8 rounded-full",
+                    orientation === "horizontal"
+                        ? "-left-12 top-1/2 -translate-y-1/2"
+                        : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+                    className,
+                )}
+                disabled={!canScrollPrev}
+                onClick={scrollPrev}
+                {...props}
+            >
+                <ArrowLeft className="h-4 w-4" />
+                <span className="sr-only">Previous slide</span>
+            </Button>
+        );
+    },
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+    ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+        const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+        return (
+            <Button
+                ref={ref}
+                variant={variant}
+                size={size}
+                className={cn(
+                    "absolute h-8 w-8 rounded-full",
+                    orientation === "horizontal"
+                        ? "-right-12 top-1/2 -translate-y-1/2"
+                        : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+                    className,
+                )}
+                disabled={!canScrollNext}
+                onClick={scrollNext}
+                {...props}
+            >
+                <ArrowRight className="h-4 w-4" />
+                <span className="sr-only">Next slide</span>
+            </Button>
+        );
+    },
+);
+CarouselNext.displayName = "CarouselNext";
+
+export {
+    type CarouselApi,
+    Carousel,
+    CarouselContent,
+    CarouselItem,
+    CarouselPrevious,
+    CarouselNext,
+};

src/interface/web/package.json

@@ -45,6 +45,8 @@
         "cmdk": "^1.0.0",
         "cronstrue": "^2.50.0",
         "dompurify": "^3.1.6",
+        "embla-carousel-autoplay": "^8.5.1",
+        "embla-carousel-react": "^8.5.1",
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
         "input-otp": "^1.2.4",

src/interface/web/yarn.lock

@@ -1897,6 +1897,29 @@ electron-to-chromium@^1.5.41:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz#69444d592fbbe628d129866c2355691ea93eda3e"
   integrity sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==
 
+embla-carousel-autoplay@^8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/embla-carousel-autoplay/-/embla-carousel-autoplay-8.5.1.tgz#d0213ab6d7beeafcfcb8f7b1fa023a4d3882f0a2"
+  integrity sha512-FnZklFpePfp8wbj177UwVaGFehgs+ASVcJvYLWTtHuYKURynCc3IdDn2qrn0E5Qpa3g9yeGwCS4p8QkrZmO8xg==
+
+embla-carousel-react@^8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/embla-carousel-react/-/embla-carousel-react-8.5.1.tgz#e06ff28cb53698d453ffad89423c23d725e9b010"
+  integrity sha512-z9Y0K84BJvhChXgqn2CFYbfEi6AwEr+FFVVKm/MqbTQ2zIzO1VQri6w67LcfpVF0AjbhwVMywDZqY4alYkjW5w==
+  dependencies:
+    embla-carousel "8.5.1"
+    embla-carousel-reactive-utils "8.5.1"
+
+embla-carousel-reactive-utils@8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.5.1.tgz#3059ab2f72f04988a96694f700a772a72bb75ffb"
+  integrity sha512-n7VSoGIiiDIc4MfXF3ZRTO59KDp820QDuyBDGlt5/65+lumPHxX2JLz0EZ23hZ4eg4vZGUXwMkYv02fw2JVo/A==
+
+embla-carousel@8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-8.5.1.tgz#8d83217e831666f6df573b0d3727ff0ae9208002"
+  integrity sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==
+
 emoji-regex@^10.3.0:
   version "10.4.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"