ResourceContent.tsx76 lines · main

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