blob: e53d447b30a96df163299a840342fbb8adc56ec2 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
"use client"
import { motion, AnimatePresence } from "motion/react"
import { RelatableQuestion } from "@/components/new/onboarding/setup/relatable-question"
import { IntegrationsStep } from "@/components/new/onboarding/setup/integrations-step"
import { SetupHeader } from "@/components/new/onboarding/setup/header"
import { ChatSidebar } from "@/components/new/onboarding/setup/chat-sidebar"
import { AnimatedGradientBackground } from "@/components/new/animated-gradient-background"
import { useIsMobile } from "@hooks/use-mobile"
import { useSetupContext, type SetupStep } from "./layout"
function StepNotFound({ goToStep }: { goToStep: (step: SetupStep) => void }) {
return (
<motion.div
className="text-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
<h2 className="text-white text-2xl mb-4">Unknown step</h2>
<button
type="button"
onClick={() => goToStep("relatable")}
className="text-blue-400 underline"
>
Go to first step
</button>
</motion.div>
)
}
export default function SetupPage() {
const { memoryFormData, currentStep, goToStep } = useSetupContext()
const isMobile = useIsMobile()
const renderStep = () => {
switch (currentStep) {
case "relatable":
return <RelatableQuestion key="relatable" />
case "integrations":
return <IntegrationsStep key="integrations" />
default:
return <StepNotFound key="not-found" goToStep={goToStep} />
}
}
return (
<div className="h-screen overflow-hidden bg-black">
<SetupHeader />
<AnimatedGradientBackground animateFromBottom={false} />
<main className="relative min-h-screen">
<div className="relative z-10">
<div className="flex flex-col lg:flex-row h-[calc(100vh-90px)] relative">
<div className="flex-1 flex flex-col items-center justify-start p-4 md:p-8">
<AnimatePresence mode="wait">{renderStep()}</AnimatePresence>
</div>
{!isMobile && (
<AnimatePresence mode="popLayout">
<ChatSidebar formData={memoryFormData} />
</AnimatePresence>
)}
</div>
</div>
</main>
{isMobile && <ChatSidebar formData={memoryFormData} />}
</div>
)
}
|