76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import { ButtonContainer } from '@/components/button-container';
|
|
import { Button, LinkButton } from '@/components/ui/button';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import type { CheckboxProps } from '@radix-ui/react-checkbox';
|
|
import Link from 'next/link';
|
|
|
|
import OnboardingLayout, {
|
|
OnboardingDescription,
|
|
} from '../../onboarding-layout';
|
|
|
|
function CheckboxGroup({
|
|
label,
|
|
description,
|
|
...props
|
|
}: { label: string; description: string } & CheckboxProps) {
|
|
const randId = Math.random().toString(36).substring(7);
|
|
return (
|
|
<label
|
|
className="flex gap-4 py-6 transition-colors hover:bg-slate-100"
|
|
htmlFor={randId}
|
|
>
|
|
<div>
|
|
<Checkbox {...props} id={randId} />
|
|
</div>
|
|
<div>
|
|
<div className="mb-1 mt-0.5 font-medium leading-none">{label}</div>
|
|
<div className="text-sm text-muted-foreground">{description}</div>
|
|
</div>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
const Tracking = () => {
|
|
return (
|
|
<OnboardingLayout
|
|
title="Verify that you get events"
|
|
description={
|
|
<OnboardingDescription>
|
|
Create your account and start taking control of your data.
|
|
</OnboardingDescription>
|
|
}
|
|
>
|
|
<div className="flex flex-col divide-y">
|
|
<CheckboxGroup
|
|
label="Website"
|
|
description="Track events and conversion for your website"
|
|
/>
|
|
<CheckboxGroup
|
|
label="App"
|
|
description="Track events and conversion for your app"
|
|
/>
|
|
<CheckboxGroup
|
|
label="Backend"
|
|
description="Track events and conversion for your backend/api"
|
|
/>
|
|
</div>
|
|
|
|
<ButtonContainer>
|
|
<LinkButton
|
|
href="/onboarding/connect"
|
|
size="lg"
|
|
className="min-w-28 self-start"
|
|
variant={'secondary'}
|
|
>
|
|
Back
|
|
</LinkButton>
|
|
<LinkButton href="/" size="lg" className="min-w-28 self-start">
|
|
Your dashboard
|
|
</LinkButton>
|
|
</ButtonContainer>
|
|
</OnboardingLayout>
|
|
);
|
|
};
|
|
|
|
export default Tracking;
|