diff --git a/src/features/onboarding/steps/step-org-create.tsx b/src/features/onboarding/steps/step-org-create.tsx new file mode 100644 index 00000000..a2db48d1 --- /dev/null +++ b/src/features/onboarding/steps/step-org-create.tsx @@ -0,0 +1,50 @@ +"use client"; + +import { useState } from "react"; +import { useOnboarding } from "@onboardjs/react"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Button } from "@/components/ui/button"; + +export const StepOrgCreate = () => { + const { next, updateContext, state } = useOnboarding(); + const [name, setName] = useState(""); + const [logoDataUrl, setLogoDataUrl] = useState(undefined); + + const onFileChange = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + if (file.size > 2 * 1024 * 1024) return; + if (!file.type.startsWith("image/")) return; + const reader = new FileReader(); + reader.onerror = () => setLogoDataUrl(undefined); + reader.onload = () => setLogoDataUrl(reader.result as string); + reader.readAsDataURL(file); + }; + + const onContinue = async () => { + if (!name.trim()) return; + await updateContext({ flowData: { ...state?.context.flowData, org: { name: name.trim(), logoDataUrl } } }); + await next(); + }; + + return ( +
+
+

Create your organisation

+

This step can't be skipped.

+
+
+ + setName(e.target.value)} placeholder="Acme Inc." /> +
+ + +
+ ); +};