import { useState } from "react"; // ui import { SecondaryButton } from "components/ui"; // types import { ICurrentUserResponse, OnboardingSteps } from "types"; // constants import { CreateWorkspaceForm } from "components/workspace"; type Props = { user: ICurrentUserResponse | undefined; updateLastWorkspace: () => Promise<void>; stepChange: (steps: Partial<OnboardingSteps>) => Promise<void>; }; export const Workspace: React.FC<Props> = ({ user, updateLastWorkspace, stepChange }) => { const [defaultValues, setDefaultValues] = useState({ name: "", slug: "", organization_size: "", }); const completeStep = async () => { if (!user) return; await stepChange({ workspace_create: true, }); await updateLastWorkspace(); }; return ( <div className="w-full space-y-7 sm:space-y-10"> <h4 className="text-xl sm:text-2xl font-semibold">Create your workspace</h4> <div className="sm:w-3/4 md:w-2/5"> <CreateWorkspaceForm onSubmit={completeStep} defaultValues={defaultValues} setDefaultValues={setDefaultValues} user={user} primaryButtonText={{ loading: "Creating...", default: "Continue", }} secondaryButton={ <SecondaryButton onClick={() => stepChange({ profile_complete: false })}> Back </SecondaryButton> } /> </div> </div> ); };