ContentSnippet.tsx84 lines · main

1	// @ts-nocheck
2	import { useParams } from 'common'
3	import { PropsWithChildren } from 'react'
4	import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
5
6	import { Markdown } from '../Markdown'
7	import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
8	import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
9
10	interface ContentSnippetProps {
11	apikey?: string
12	endpoint?: string
13	selectedLanguage: 'js' | 'bash'
14	snippet: {
15	key: string
16	category: string
17	title: string
18	description?: string
19	js?: (apikey?: string, endpoint?: string) => string
20	bash?: (apikey?: string, endpoint?: string) => string
21	}
22	}
23
24	const ContentSnippet = ({
25	apikey,
26	endpoint,
27	selectedLanguage,
28	snippet,
29	children,
30	}: PropsWithChildren<ContentSnippetProps>) => {
31	const { ref: projectRef } = useParams()
32	const { data: org } = useSelectedOrganizationQuery()
33	const { mutate: sendEvent } = useSendEventMutation()
34
35	const codeSnippet = snippet[selectedLanguage]?.(apikey, endpoint).replaceAll(
36	'[ref]',
37	projectRef ?? ''
38	)
39
40	const handleCopy = () => {
41	sendEvent({
42	action: 'api_docs_code_copy_button_clicked',
43	properties: {
44	title: snippet.title,
45	selectedLanguage,
46	},
47	groups: {
48	project: projectRef ?? 'Unknown',
49	organization: org?.slug ?? 'Unknown',
50	},
51	})
52	}
53
54	return (
55	<div className="space-y-4 py-6 pb-2 last:pb-6">
56	<div className="px-4 space-y-4">
57	<h2 id={snippet.key} tabIndex={-1} className="doc-heading">
58	{snippet.title}
59	</h2>
60	{snippet.description !== undefined && (
61	<div className="doc-section">
62	<article className="text text-sm text-foreground-light">
63	<Markdown
64	className="max-w-none"
65	content={snippet.description.replaceAll('[ref]', projectRef ?? '_')}
66	/>
67	</article>
68	</div>
69	)}
70	</div>
71	{children}
72	{codeSnippet !== undefined && (
73	<div className="px-4 codeblock-container">
74	<div className="bg rounded-sm p-2">
75	<SimpleCodeBlock className={selectedLanguage} onCopy={handleCopy}>
76	{codeSnippet}
77	</SimpleCodeBlock>
78	</div>
79	</div>
80	)}
81	</div>
82	)
83	}
84	export default ContentSnippet