Onboarding Dialog

1"use client";
2 
3import { useState } from "react";
4import Image from "next/image";
5 
6import { ArrowRightIcon } from "lucide-react";
7 
8import { Button } from "@/components/ui/button";
9import {
10  ResponsiveDialog,
11  ResponsiveDialogClose,
12  ResponsiveDialogContent,
13  ResponsiveDialogDescription,
14  ResponsiveDialogFooter,
15  ResponsiveDialogHeader,
16  ResponsiveDialogTitle,
17  ResponsiveDialogTrigger,
18} from "@/components/ui/revola";
19import { cn } from "@/lib/utils";
20 
21export default function OnboardingDialog() {
22  const [step, setStep] = useState(1);
23 
24  const stepContent = [
25    {
26      title: "Welcome to Revola",
27      description:
28        "A modern React component library built with Radix UI and Tailwind CSS, designed for building beautiful and accessible user interfaces.",
29    },
30    {
31      title: "Built for Developers",
32      description:
33        "Revola provides a comprehensive set of pre-built components that are fully accessible, customizable, and ready for production use.",
34    },
35    {
36      title: "Modern & Accessible",
37      description:
38        "Every component follows modern web standards with built-in accessibility features, keyboard navigation, and screen reader support.",
39    },
40    {
41      title: "Start Building Today",
42      description:
43        "Jumpstart your next project with Revola's component library. Check out our documentation and examples to get started quickly.",
44    },
45  ];
46 
47  const totalSteps = stepContent.length;
48 
49  const handleContinue = () => {
50    if (step < totalSteps) {
51      setStep(step + 1);
52    }
53  };
54 
55  return (
56    <ResponsiveDialog
57      onOpenChange={(open) => {
58        if (open) setStep(1);
59      }}
60    >
61      <ResponsiveDialogTrigger asChild>
62        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
63          Onboarding
64        </Button>
65      </ResponsiveDialogTrigger>
66      <ResponsiveDialogContent
67        closeButtonClassName="text-black bg-yellow-500/5"
68        className="flex flex-col max-sm:max-h-[85%] sm:max-w-[400px]"
69      >
70        <div className="p-2">
71          <Image
72            width={382}
73            height={216}
74            alt="dialog"
75            src="/extended-gradient.png"
76            className="w-full rounded-md object-cover"
77          />
78        </div>
79        <div className="space-y-6 p-6 pt-3">
80          <ResponsiveDialogHeader>
81            <ResponsiveDialogTitle>{stepContent[step - 1].title}</ResponsiveDialogTitle>
82// … truncated