FilesExpand file tree

main

/

api-request-tabs.tsx

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

42 lines (39 loc) · 1.45 KB

main

/

api-request-tabs.tsx

Copy path

Top

File metadata and controls

• Code
• Blame

42 lines (39 loc) · 1.45 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

import type { RenderContext } from 'fumadocs-openapi'

import type { CodeUsageGeneratorRegistry } from 'fumadocs-openapi/requests/generators'

import {

CodeBlockTab,

CodeBlockTabs,

CodeBlockTabsList,

CodeBlockTabsTrigger,

} from 'fumadocs-ui/components/codeblock'

interface APIRequestTabsProps {

registry: CodeUsageGeneratorRegistry

context: RenderContext

}

/** Keeps highlighted samples mounted so changing languages does not restart Shiki. */

export function APIRequestTabs({ registry, context }: APIRequestTabsProps) {

const samples = Array.from(registry.map().entries())

const first = samples[0]

if (!first) return null

const UsageTab = context.clientBoundary.UsageTab

return (

<CodeBlockTabs groupId='fumadocs_openapi_requests' defaultValue={first[0]}>

<CodeBlockTabsList aria-label='Request language'>

{samples.map(([id, sample]) => (

<CodeBlockTabsTrigger

key={id}

value={id}

className='focus-visible:outline-2 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-[-2px]'

>

{sample.label ?? sample.lang}

</CodeBlockTabsTrigger>

))}

</CodeBlockTabsList>

{samples.map(([id, sample]) => (

<CodeBlockTab key={id} value={id} forceMount className='data-[state=inactive]:hidden'>

<UsageTab id={id} lang={sample.lang} _client={sample._client} />

</CodeBlockTab>

))}

</CodeBlockTabs>

)

}