CodeSnippet.tsx48 lines · main

1	// @ts-nocheck
2	import { useParams } from 'common'
3	import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
4
5	import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
6	import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
7
8	interface CodeSnippetProps {
9	selectedLang: 'bash' | 'js'
10	snippet: {
11	title?: string
12	bash: { language?: string; code: string }
13	js?: { language?: string; code: string }
14	}
15	}
16
17	const CodeSnippet = ({ selectedLang, snippet }: CodeSnippetProps) => {
18	const { ref: projectRef } = useParams()
19	const { data: org } = useSelectedOrganizationQuery()
20	const { mutate: sendEvent } = useSendEventMutation()
21
22	const handleCopy = () => {
23	sendEvent({
24	action: 'api_docs_code_copy_button_clicked',
25	properties: {
26	title: snippet.title,
27	selectedLanguage: selectedLang,
28	},
29	groups: {
30	project: projectRef ?? 'Unknown',
31	organization: org?.slug ?? 'Unknown',
32	},
33	})
34	}
35
36	if (!snippet[selectedLang]) return null
37	return (
38	<div>
39	<h4 className="heading-default mb-2">{snippet.title}</h4>
40	<div className="[&_.codeBlock]:p-0 [&_.token-line]:text-sm">
41	<SimpleCodeBlock className={snippet[selectedLang]?.language} onCopy={handleCopy}>
42	{snippet[selectedLang]?.code}
43	</SimpleCodeBlock>
44	</div>
45	</div>
46	)
47	}
48	export default CodeSnippet