feature/user-onboarding (#73)

apps/www/src/app/(onboarding)/onboarding/layout.tsx

@@ -0,0 +1,48 @@
+import { notFound } from "next/navigation";
+import { getUserChannels } from "@/actions/get-channels";
+
+import { dashboardConfig } from "@/config/dashboard";
+import { getCurrentUser } from "@/lib/session";
+import { DashboardNav } from "@/components/layout/nav";
+import { NavBar } from "@/components/layout/navbar";
+import { SiteFooter } from "@/components/layout/site-footer";
+
+interface OnBoardingLayoutProps {
+  children?: React.ReactNode;
+}
+
+export default async function OnBoardingLayout({
+  children,
+}: OnBoardingLayoutProps) {
+  const user = await getCurrentUser();
+
+  if (!user) {
+    return notFound();
+  }
+
+  const userChannels = await getUserChannels();
+
+  const sidebarNavItems = [
+    ...dashboardConfig.sidebarNav,
+    ...userChannels.map((channel) => ({
+      title: channel.name,
+      href: `/dashboard/channels/${channel.id}`, // Use ID instead of name
+    })),
+  ];
+
+  return (
+    <div className="flex min-h-screen flex-col space-y-6">
+      <NavBar user={user} items={dashboardConfig.mainNav} scroll={false} />
+
+      <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
+        <aside className="hidden w-[200px] flex-col md:flex">
+          <DashboardNav items={sidebarNavItems} />
+        </aside>
+        <main className="flex w-full flex-1 flex-col overflow-hidden">
+          {children}
+        </main>
+      </div>
+      <SiteFooter className="border-t" />
+    </div>
+  );
+}

apps/www/src/app/(onboarding)/onboarding/page.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+import { useSession } from "next-auth/react";
+
+import type { StepItem } from "@dingify/ui/components/stepper/index";
+import { Step, Stepper } from "@dingify/ui/components/stepper/index";
+
+import { cn } from "@/lib/utils";
+import { ChannelForm } from "@/components/onboarding/channel-form";
+import { EventForm } from "@/components/onboarding/event-form";
+import ExploreMore from "@/components/onboarding/explore-more";
+import GenerateApiKey from "@/components/onboarding/GenerateApiKey";
+
+import { useRouter } from "next/navigation";
+
+export default function OnBoardingPage() {
+
+  const {data: session} = useSession()
+  const router = useRouter()
+
+  if(session === null) {
+       router.push("/login")
+  }
+
+  const steps = [
+    { label: "step 1", description: "step 1" },
+    { label: "step 2", description: "step 2" },
+    { label: "step 3", description: "step 3" },
+    { label: "step 4", description: "step 4" },
+  ] as StepItem[];
+
+  const [apiKey, setApiKey] = useState("");
+  const [channelName, setChannelName] = useState("");
+
+  return (
+    <div>
+      <div className="flex items-center justify-between px-2 mb-4">
+        <div className="grid gap-1">
+          <h1 className="font-heading text-3xl md:text-4xl">
+            Create your first event
+          </h1>
+          <p className="text-lg text-muted-foreground">
+            Follow the steps to create your first event
+          </p>
+        </div>
+      </div>
+      <Stepper
+        orientation={"vertical"}
+        initialStep={0}
+        steps={steps}
+        size="sm"
+        expandVerticalSteps
+        styles={{
+          "step-button-container": cn("border-none"),
+        }}
+      >
+        <Step icon={CircleIcon}>
+          <GenerateApiKey apiKey={apiKey} setApiKey={setApiKey} />
+        </Step>
+        <Step icon={CircleIcon}>
+          <ChannelForm setChannelName={setChannelName} />
+        </Step>
+        <Step icon={CircleIcon}>
+          <EventForm apiKey={apiKey} channelName={channelName} />
+        </Step>
+        <Step icon={CircleIcon}>
+          <ExploreMore />
+        </Step>
+      </Stepper>
+    </div>
+  );
+}
+
+function CircleIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-circle"
+    >
+      <circle cx="12" cy="12" r="10" />
+    </svg>
+  );
+}

apps/www/src/components/buttons/CreatEventButton.tsx

@@ -22,6 +22,7 @@ import {
 } from "@dingify/ui/components/dialog";
 
 import { Confetti } from "../ui/confetti";
+import { CheckIcon } from "lucide-react";
 
 SyntaxHighlighter.registerLanguage("json", json);
 
@@ -55,7 +56,7 @@ const handleClick = () => {
 
 export function CreateEventButton() {
   const [isLoading, setIsLoading] = useState(false);
-  const [copied, setCopied] = useState(false);
+  const [hasCopied, setHasCopied] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [apiKey, setApiKey] = useState("");
 
@@ -97,7 +98,7 @@ export function CreateEventButton() {
   };
 
   const handleCopy = () => {
-    setCopied(true);
+    setHasCopied(true);
     toast.success("cURL command copied to clipboard.");
   };
 
@@ -142,7 +143,11 @@ export function CreateEventButton() {
             </SyntaxHighlighter>
             <CopyToClipboard text={curlCommand} onCopy={handleCopy}>
               <Button variant="outline" className="absolute right-2 top-2">
-                <CopyIcon className="h-4 w-4" />
+                {hasCopied ? (
+                  <CheckIcon className="h-4 w-4" />
+                ) : (
+                  <CopyIcon className="h-4 w-4" />
+                )}
               </Button>
             </CopyToClipboard>
           </div>