118 lines
3.7 KiB
TypeScript
118 lines
3.7 KiB
TypeScript
"use client";
|
|
import { getCookie, setCookie } from "cookies-next/client";
|
|
import { add } from "date-fns";
|
|
import { ArrowRight, CheckCircle } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { Button } from "~/components/ui/button";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "./ui/alert-dialog";
|
|
|
|
const COOKIE_KEY = "onboard_tutorial_shown";
|
|
|
|
export const OnboardTutorial = () => {
|
|
const { t } = useTranslation();
|
|
const hasCookie = getCookie(COOKIE_KEY) === "true";
|
|
|
|
const handleClose = () => {
|
|
setCookie(COOKIE_KEY, "true", {
|
|
expires: add(new Date(), { days: 30 }),
|
|
});
|
|
setOpen(false);
|
|
};
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!hasCookie) {
|
|
const timer = setTimeout(() => {
|
|
setOpen(true);
|
|
}, 1000); // 1 second delay
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [hasCookie]);
|
|
|
|
return (
|
|
<AlertDialog open={open}>
|
|
<AlertDialogContent className="max-w-2xl">
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle className="flex items-center gap-2 font-semibold text-2xl">
|
|
<CheckCircle className="size-7 text-green-500" />
|
|
{t.onboarding_tutorial.title}
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription className="sr-only">
|
|
descrizione
|
|
</AlertDialogDescription>
|
|
<div className="space-y-4 pt-4 text-base text-foreground">
|
|
<p className="font-medium text-foreground text-lg">
|
|
{t.onboarding_tutorial.sub_title}
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex gap-3">
|
|
<div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600">
|
|
<span className="font-semibold">1</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="font-semibold text-foreground">
|
|
{t.onboarding_tutorial.step1_title}
|
|
</p>
|
|
<p className="text-muted-foreground text-sm">
|
|
{t.onboarding_tutorial.step1_desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600">
|
|
<span className="font-semibold">2</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="font-semibold text-foreground">
|
|
{t.onboarding_tutorial.step2_title}
|
|
</p>
|
|
<p className="text-muted-foreground text-sm">
|
|
{t.onboarding_tutorial.step2_desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600">
|
|
<span className="font-semibold">3</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="font-semibold text-foreground">
|
|
{t.onboarding_tutorial.step3_title}
|
|
</p>
|
|
<p className="text-muted-foreground text-sm">
|
|
{t.onboarding_tutorial.step3_desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
|
|
<p className="text-blue-900 text-sm">
|
|
💡 <strong>{t.onboarding_tutorial.tip_title}</strong>{" "}
|
|
{t.onboarding_tutorial.tip}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<Button onClick={handleClose} size="lg" variant="success">
|
|
<span>{t.onboarding_tutorial.button_text}</span>
|
|
<ArrowRight />
|
|
</Button>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
};
|