Skip to content

Commit fb3caa3

Browse files
comatorycomatory
committed
feat: onboarding navigation buttons
1 parent 6072a63 commit fb3caa3

File tree

5 files changed

+95
-78
lines changed

5 files changed

+95
-78
lines changed

‎studio/src/components/onboarding/onboarding-navigation.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { ArrowLeftIcon, ArrowRightIcon, InfoCircledIcon } from '@radix-ui/react-icons';
2+
import { Link } from '../ui/link';
3+
import { Button } from '../ui/button';
4+
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
5+
6+
export const OnboardingNavigation = ({
7+
backHref,
8+
forward,
9+
forwardLabel = 'Next',
10+
onSkip,
11+
}: {
12+
backHref?: string;
13+
forward: { href: string } | { onClick: () => void; isLoading?: boolean };
14+
forwardLabel?: string;
15+
onSkip: () => void;
16+
}) => {
17+
return (
18+
<div className="flex w-full justify-between">
19+
<div className="flex items-center gap-1">
20+
<Button asChild variant="outline" onClick={onSkip}>
21+
<Link href="/">Skip</Link>
22+
</Button>
23+
<Tooltip delayDuration={0}>
24+
<TooltipTrigger asChild>
25+
<InfoCircledIcon className="size-3.5 text-muted-foreground" />
26+
</TooltipTrigger>
27+
<TooltipContent>You can always get back to this wizard from the application. Safe to skip.</TooltipContent>
28+
</Tooltip>
29+
</div>
30+
<div className="flex gap-2">
31+
{backHref ? (
32+
<Button className="group" asChild variant="outline">
33+
<Link href={backHref}>
34+
<ArrowLeftIcon className="mr-2 transition-transform group-hover:-translate-x-1" />
35+
Back
36+
</Link>
37+
</Button>
38+
) : (
39+
<Button variant="outline" disabled>
40+
<ArrowLeftIcon className="mr-2" />
41+
Back
42+
</Button>
43+
)}
44+
{'href' in forward ? (
45+
<Button className="group" asChild>
46+
<Link href={forward.href}>
47+
{forwardLabel}
48+
<ArrowRightIcon className="ml-2 transition-transform group-hover:translate-x-1" />
49+
</Link>
50+
</Button>
51+
) : (
52+
<Button
53+
className="group"
54+
onClick={forward.onClick}
55+
isLoading={forward.isLoading}
56+
disabled={forward.isLoading}
57+
>
58+
{forwardLabel}
59+
<ArrowRightIcon className="ml-2 transition-transform group-hover:translate-x-1" />
60+
</Button>
61+
)}
62+
</div>
63+
</div>
64+
);
65+
};

‎studio/src/components/onboarding/step-1.tsx‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useEffect } from 'react';
2-
import { Link } from '../ui/link';
3-
import { Button } from '../ui/button';
42
import { useOnboarding } from '@/hooks/use-onboarding';
3+
import { OnboardingNavigation } from './onboarding-navigation';
54
import { useMutation } from '@connectrpc/connect-query';
65
import { createOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/platform-PlatformService_connectquery';
76
import { useRouter } from 'next/router';
@@ -46,31 +45,21 @@ export const Step1 = () => {
4645
return (
4746
<div className="flex flex-col items-center gap-4 text-center">
4847
<h2 className="text-2xl font-semibold tracking-tight">Step 1</h2>
49-
<div className="flex w-full justify-between">
50-
<Button asChild variant="secondary" onClick={setSkipped}>
51-
<Link href="/">Skip</Link>
52-
</Button>
53-
<div className="flex">
54-
<Button className="mr-2" asChild disabled>
55-
<Link href="#">Back</Link>
56-
</Button>
57-
<Button
58-
onClick={() => {
59-
// TODO: replace with real values in form
60-
mutate({
61-
organizationName: organization?.name ?? '',
62-
slack: true,
63-
email: false,
64-
invititationEmails: [],
65-
});
66-
}}
67-
isLoading={isPending}
68-
disabled={isPending}
69-
>
70-
Next
71-
</Button>
72-
</div>
73-
</div>
48+
<OnboardingNavigation
49+
onSkip={setSkipped}
50+
forward={{
51+
onClick: () => {
52+
// TODO: replace with real values in form
53+
mutate({
54+
organizationName: organization?.name ?? '',
55+
slack: true,
56+
email: false,
57+
invititationEmails: [],
58+
});
59+
},
60+
isLoading: isPending,
61+
}}
62+
/>
7463
</div>
7564
);
7665
};

‎studio/src/components/onboarding/step-2.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useEffect } from 'react';
2-
import { Link } from '../ui/link';
3-
import { Button } from '../ui/button';
42
import { useOnboarding } from '@/hooks/use-onboarding';
3+
import { OnboardingNavigation } from './onboarding-navigation';
54

65
export const Step2 = () => {
76
const { setStep, setSkipped } = useOnboarding();
@@ -13,19 +12,7 @@ export const Step2 = () => {
1312
return (
1413
<div className="flex flex-col items-center gap-4 text-center">
1514
<h2 className="text-2xl font-semibold tracking-tight">Step 2</h2>
16-
<div className="flex w-full justify-between">
17-
<Button asChild variant="secondary" onClick={setSkipped}>
18-
<Link href="/">Skip</Link>
19-
</Button>
20-
<div className="flex">
21-
<Button className="mr-2" asChild>
22-
<Link href="/onboarding/1">Back</Link>
23-
</Button>
24-
<Button asChild>
25-
<Link href="/onboarding/3">Next</Link>
26-
</Button>
27-
</div>
28-
</div>
15+
<OnboardingNavigation onSkip={setSkipped} backHref="/onboarding/1" forward={{ href: '/onboarding/3' }} />
2916
</div>
3017
);
3118
};

‎studio/src/components/onboarding/step-3.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useEffect } from 'react';
2-
import { Link } from '../ui/link';
3-
import { Button } from '../ui/button';
42
import { useOnboarding } from '@/hooks/use-onboarding';
3+
import { OnboardingNavigation } from './onboarding-navigation';
54

65
export const Step3 = () => {
76
const { setStep, setSkipped } = useOnboarding();
@@ -13,19 +12,7 @@ export const Step3 = () => {
1312
return (
1413
<div className="flex flex-col items-center gap-4 text-center">
1514
<h2 className="text-2xl font-semibold tracking-tight">Step 3</h2>
16-
<div className="flex w-full justify-between">
17-
<Button asChild variant="secondary" onClick={setSkipped}>
18-
<Link href="/">Skip</Link>
19-
</Button>
20-
<div className="flex">
21-
<Button className="mr-2" asChild>
22-
<Link href="/onboarding/2">Back</Link>
23-
</Button>
24-
<Button asChild>
25-
<Link href="/onboarding/4">Next</Link>
26-
</Button>
27-
</div>
28-
</div>
15+
<OnboardingNavigation onSkip={setSkipped} backHref="/onboarding/2" forward={{ href: '/onboarding/4' }} />
2916
</div>
3017
);
3118
};

‎studio/src/components/onboarding/step-4.tsx‎

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useEffect } from 'react';
2-
import { Link } from '../ui/link';
3-
import { Button } from '../ui/button';
42
import { useOnboarding } from '@/hooks/use-onboarding';
3+
import { OnboardingNavigation } from './onboarding-navigation';
54
import { useMutation } from '@connectrpc/connect-query';
65
import { finishOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/platform-PlatformService_connectquery';
76
import { useToast } from '../ui/use-toast';
@@ -46,25 +45,15 @@ export const Step4 = () => {
4645
return (
4746
<div className="flex flex-col items-center gap-4 text-center">
4847
<h2 className="text-2xl font-semibold tracking-tight">Step 4</h2>
49-
<div className="flex w-full justify-between">
50-
<Button asChild variant="secondary" onClick={setSkipped}>
51-
<Link href="/">Skip</Link>
52-
</Button>
53-
<div className="flex">
54-
<Button className="mr-2" asChild>
55-
<Link href="/onboarding/3">Back</Link>
56-
</Button>
57-
<Button
58-
onClick={() => {
59-
mutate({});
60-
}}
61-
isLoading={isPending}
62-
disabled={isPending}
63-
>
64-
Finish
65-
</Button>
66-
</div>
67-
</div>
48+
<OnboardingNavigation
49+
onSkip={setSkipped}
50+
backHref="/onboarding/3"
51+
forward={{
52+
onClick: () => mutate({}),
53+
isLoading: isPending,
54+
}}
55+
forwardLabel="Finish"
56+
/>
6857
</div>
6958
);
7059
};

0 commit comments

Comments
 (0)