Files
myeasycms-v2/apps/nextjs/src/app/(dashboard)/onboarding/multi-step-form.tsx

28 lines
879 B
TypeScript

"use client";
import { useSearchParams } from "next/navigation";
import { AnimatePresence } from "framer-motion";
import { CreateApiKey } from "./create-api-key";
import { CreateProject } from "./create-project";
import { Done } from "./done";
import Intro from "./intro";
export function Onboarding(props: { workspaceId: string }) {
const search = useSearchParams();
const step = search.get("step");
return (
<div className="mx-auto flex h-[calc(100vh-14rem)] w-full max-w-screen-sm flex-col items-center">
<AnimatePresence mode="wait">
{!step && <Intro key="intro" />}
{step === "create-project" && (
<CreateProject workspaceId={props.workspaceId} />
)}
{step === "create-api-key" && <CreateApiKey />}
{step === "done" && <Done workspaceId={props.workspaceId} />}
</AnimatePresence>
</div>
);
}