69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { motion } from "framer-motion";
|
|
import { Balancer } from "react-wrap-balancer";
|
|
|
|
import { CreateProjectForm } from "../[workspaceId]/_components/create-project-form";
|
|
|
|
export function CreateProject(props: { workspaceId: string }) {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<motion.div
|
|
className="my-auto flex h-full w-full flex-col items-center justify-center"
|
|
exit={{ opacity: 0, scale: 0.95 }}
|
|
transition={{ duration: 0.3, type: "spring" }}
|
|
>
|
|
<motion.div
|
|
variants={{
|
|
show: {
|
|
transition: {
|
|
staggerChildren: 0.2,
|
|
},
|
|
},
|
|
}}
|
|
initial="hidden"
|
|
animate="show"
|
|
className="flex flex-col rounded-xl bg-background/60 p-8"
|
|
>
|
|
<motion.h1
|
|
className="mb-4 font-cal text-2xl font-bold transition-colors sm:text-3xl"
|
|
variants={{
|
|
hidden: { opacity: 0, x: 250 },
|
|
show: {
|
|
opacity: 1,
|
|
x: 0,
|
|
transition: { duration: 0.4, type: "spring" },
|
|
},
|
|
}}
|
|
>
|
|
<Balancer>
|
|
{`Let's start off by creating your first project`}
|
|
</Balancer>
|
|
</motion.h1>
|
|
<motion.div
|
|
variants={{
|
|
hidden: { opacity: 0, x: 100 },
|
|
show: {
|
|
opacity: 1,
|
|
x: 0,
|
|
transition: { duration: 0.4, type: "spring" },
|
|
},
|
|
}}
|
|
>
|
|
<CreateProjectForm
|
|
workspaceId={props.workspaceId}
|
|
onSuccess={({ id }) => {
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
searchParams.set("step", "create-api-key");
|
|
searchParams.set("projectId", id);
|
|
router.push(`/onboarding?${searchParams.toString()}`);
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
}
|