mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-12-18 18:47:11 +00:00
Add carousel for navigating images in the sign up modal
This commit is contained in:
sabaimran
parent
943065b7b3
commit
a7d0ed8670
4 changed files with 312 additions and 77 deletions
|
|
@ -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">
|
||||
{tips.map((tip, index) => (
|
||||
<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 ${
|
||||
index === currentTip
|
||||
? "opacity-100 translate-x-0"
|
||||
: index < currentTip
|
||||
? "opacity-0 -translate-x-full"
|
||||
: "opacity-0 translate-x-full"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
<Button
|
||||
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>
|
||||
<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
|
||||
src={tip.src}
|
||||
alt={tip.alt}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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);
|
||||
|
|
|
|||
242
src/interface/web/components/ui/carousel.tsx
Normal file
242
src/interface/web/components/ui/carousel.tsx
Normal file
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue