TroubleshootingAccordion.tsx49 lines · main

1	'use client'
2
3	import { ReactNode } from 'react'
4	import { Accordion, cn } from 'ui'
5
6	import { useTrack } from '@/lib/telemetry/track'
7
8	interface TroubleshootingAccordionProps {
9	children: ReactNode
10	/** Error mapping ID — used for telemetry */
11	errorType: string
12	/** Step titles keyed by step number — used for telemetry */
13	stepTitles?: Record<number, string>
14	/** Which step to expand by default (1-indexed), defaults to 1 */
15	defaultExpandedStep?: number
16	className?: string
17	}
18
19	export function TroubleshootingAccordion({
20	children,
21	errorType,
22	stepTitles,
23	defaultExpandedStep = 1,
24	className,
25	}: TroubleshootingAccordionProps) {
26	const track = useTrack()
27	const defaultValue = defaultExpandedStep > 0 ? `step-${defaultExpandedStep}` : undefined
28
29	return (
30	<Accordion
31	type="single"
32	collapsible
33	defaultValue={defaultValue}
34	className={cn('w-full', className)}
35	onValueChange={(value) => {
36	const expanded = Boolean(value)
37	const step = expanded ? parseInt(value.replace('step-', ''), 10) : null
38	track('inline_error_troubleshooter_step_clicked', {
39	errorType,
40	step,
41	stepTitle: step !== null ? stepTitles?.[step] : undefined,
42	expanded,
43	})
44	}}
45	>
46	{children}
47	</Accordion>
48	)
49	}