EdgeFunction.tsx39 lines · main

1	import { useParams } from 'common'
2
3	import { DOCS_RESOURCE_CONTENT } from '../ProjectAPIDocs.constants'
4	import ResourceContent from '../ResourceContent'
5	import type { ContentProps } from './Content.types'
6	import { useEdgeFunctionsQuery } from '@/data/edge-functions/edge-functions-query'
7	import { useAppStateSnapshot } from '@/state/app-state'
8
9	export const EdgeFunction = ({ language, apikey = 'API_KEY', endpoint }: ContentProps) => {
10	const { ref } = useParams()
11	const snap = useAppStateSnapshot()
12	const { data } = useEdgeFunctionsQuery({ projectRef: ref })
13
14	const resource = snap.activeDocsSection[1]
15	const edgeFunctions = data ?? []
16	const edgeFunction = edgeFunctions.find((fn) => fn.name === resource)
17
18	if (edgeFunction === undefined) return null
19
20	return (
21	<div className="divide-y">
22	<div className="space-y-1 px-4 py-4">
23	<div className="flex items-center space-x-2">
24	<h2>{edgeFunction.name}</h2>
25	</div>
26	</div>
27
28	<ResourceContent
29	selectedLanguage={language}
30	snippet={DOCS_RESOURCE_CONTENT.invokeEdgeFunction}
31	codeSnippets={DOCS_RESOURCE_CONTENT.invokeEdgeFunction.code({
32	name: resource,
33	endpoint: `${endpoint}`,
34	apikey: apikey,
35	})}
36	/>
37	</div>
38	)
39	}