APIDocsButton.tsx54 lines · main
1// @ts-nocheck
2import { useParams } from 'common'
3import { BookOpenText } from 'lucide-react'
4
5import { ButtonTooltip } from './ButtonTooltip'
6import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
7import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
8import { useAppStateSnapshot } from '@/state/app-state'
9
10interface APIDocsButtonProps {
11 section?: string[]
12 source: string
13 label?: string
14 tooltip?: string
15}
16
17export const APIDocsButton = ({ section, source, label, tooltip }: APIDocsButtonProps) => {
18 const snap = useAppStateSnapshot()
19 const { ref } = useParams()
20 const { data: org } = useSelectedOrganizationQuery()
21 const { mutate: sendEvent } = useSendEventMutation()
22
23 return (
24 <ButtonTooltip
25 size="tiny"
26 type="default"
27 onClick={() => {
28 if (section) snap.setActiveDocsSection(section)
29 snap.setShowProjectApiDocs(true)
30
31 sendEvent({
32 action: 'api_docs_opened',
33 properties: {
34 source,
35 },
36 groups: {
37 project: ref ?? 'Unknown',
38 organization: org?.slug ?? 'Unknown',
39 },
40 })
41 }}
42 icon={<BookOpenText />}
43 className={label ? undefined : 'w-7'}
44 tooltip={{
45 content: {
46 side: 'bottom',
47 text: tooltip ?? 'API Docs',
48 },
49 }}
50 >
51 {label}
52 </ButtonTooltip>
53 )
54}