WelcomeOnboard

1"use client";
2
3import { useState } from "react";
4import { Sparkles, Users, Palette, Zap, ArrowRight, X } from "lucide-react";
5
6const quickStartItems = [
7  { icon: Palette, title: "Customize your workspace", description: "Set your theme, layout, and preferences to make it yours.", color: "from-pink-500 to-rose-500" },
8  { icon: Users, title: "Invite your team", description: "Collaborate in real-time by adding team members.", color: "from-blue-500 to-cyan-500" },
9  { icon: Zap, title: "Explore integrations", description: "Connect your favorite tools and supercharge your workflow.", color: "from-amber-500 to-orange-500" },
10];
11
12export default function WelcomeOnboard() {
13  const [dismissed, setDismissed] = useState<string[]>([]);
14  const [skipped, setSkipped] = useState(false);
15
16  if (skipped) {
17    return (
18      <div className="mx-auto w-full max-w-lg rounded-2xl border border-zinc-200 bg-white p-8 text-center shadow-xl dark:border-zinc-800 dark:bg-zinc-950">
19        <Sparkles className="mx-auto mb-3 h-8 w-8 text-violet-500" />
20        <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-50">You&apos;re all set!</h2>
21        <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">You can always revisit the setup from your settings.</p>
22      </div>
23    );
24  }
25
26  return (
27    <div className="mx-auto w-full max-w-lg rounded-2xl border border-zinc-200 bg-white p-8 shadow-xl dark:border-zinc-800 dark:bg-zinc-950">
28      <div className="mb-6 text-center">
29        <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-600">
30          <Sparkles className="h-7 w-7 text-white" />
31        </div>
32        <h2 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">Welcome, Alex!</h2>
33        <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Here are a few things to get you started</p>
34      </div>
35
36      <div className="space-y-3">
37        {quickStartItems.filter((item) => !dismissed.includes(item.title)).map((item) => (
38          <div key={item.title} className="group relative flex items-start gap-4 rounded-xl border border-zinc-100 p-4 transition-all hover:border-zinc-200 hover:bg-zinc-50/50 dark:border-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-900/50">
39            <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${item.color}`}>
40              <item.icon className="h-5 w-5 text-white" />
41            </div>
42            <div className="flex-1">
43              <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{item.title}</h3>
44              <p className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">{item.description}</p>
45            </div>
46            <div className="flex items-center gap-1">
47              <button className="rounded-md p-1 text-zinc-400 opacity-0 transition-all hover:bg-zinc-100 hover:text-zinc-600 group-hover:opacity-100 dark:hover:bg-zinc-800 dark:hover:text-zinc-300">
48                <X className="h-3.5 w-3.5" onClick={() => setDismissed([...dismissed, item.title])} />
49              </button>
50              <button className="rounded-md p-1 text-violet-500 transition-colors hover:bg-violet-50 dark:hover:bg-violet-900/20">
51                <ArrowRight className="h-4 w-4" />
52              </button>
53            </div>
54          </div>
55        ))}
56      </div>
57
58      <div className="mt-6 flex items-center justify-between">
59        <button onClick={() => setSkipped(true)} className="text-sm text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300">Skip tour</button>
60        <button className="rounded-lg bg-violet-600 px-5 py-2 text-sm font-semibold text-white transition-all hover:bg-violet-500 active:scale-[0.98]">Get started</button>
61      </div>
62    </div>
63  );
64}