11'use client' ;
22
3- import React from 'react' ;
3+ import React , { useId } from 'react' ;
44import { useFiltering } from '@/components/filtering-context' ;
55import { Tabs , TabsContent , TabsList , TabsTrigger } from '@/components/ui/tabs' ;
66import { CodeBlock } from '@/components/code-block' ;
@@ -21,9 +21,11 @@ export function IntegrationExamples({
2121} ) {
2222 const { filtering, setFiltering } = useFiltering ( ) ;
2323 const gen = new LogGenerator ( 12345 , filtering ) ;
24+ const baseFilteringId = useId ( ) ;
2425
2526 if ( events . length <= 1 ) {
2627 const only = events [ 0 ] ;
28+ const inputId = `${ baseFilteringId } -filter` ;
2729 return (
2830 < div className = "relative" >
2931 < CodeBlock language = "json" >
@@ -35,11 +37,14 @@ export function IntegrationExamples({
3537 ) }
3638 </ CodeBlock >
3739 < div className = "absolute bottom-2 right-3 text-xs text-neutral-500 dark:text-neutral-400 flex items-center gap-2 bg-white/60 dark:bg-neutral-900/60 px-2 py-1 rounded" >
38- < label className = "cursor-pointer select-none" > Apply filtering</ label >
40+ < label className = "cursor-pointer select-none" htmlFor = { inputId } >
41+ Apply filtering
42+ </ label >
3943 < input
4044 aria-label = "Apply filtering"
4145 type = "checkbox"
4246 className = "cursor-pointer"
47+ id = { inputId }
4348 checked = { filtering }
4449 onChange = { ( e ) => setFiltering ( e . target . checked ) }
4550 />
@@ -62,32 +67,43 @@ export function IntegrationExamples({
6267 </ TabsTrigger >
6368 ) ) }
6469 </ TabsList >
65- { events . map ( ( evt ) => (
66- < TabsContent key = { String ( evt ) } value = { String ( evt ) } className = "mt-0.5" >
67- < div className = "relative" >
68- < CodeBlock language = "json" >
69- { formatLog (
70- gen . generateLogWithOptions ( logType , {
71- preferredEvent : evt ,
72- filtering,
73- } ) ,
74- ) }
75- </ CodeBlock >
76- < div className = "absolute bottom-2 right-3 text-xs text-neutral-500 dark:text-neutral-400 flex items-center gap-2 bg-white/60 dark:bg-neutral-900/60 px-2 py-1 rounded" >
77- < label className = "cursor-pointer select-none" >
78- Apply filtering
79- </ label >
80- < input
81- aria-label = "Apply filtering"
82- type = "checkbox"
83- className = "cursor-pointer"
84- checked = { filtering }
85- onChange = { ( e ) => setFiltering ( e . target . checked ) }
86- />
70+ { events . map ( ( evt ) => {
71+ const inputId = `${ baseFilteringId } -${ String ( evt ) } ` ;
72+ return (
73+ < TabsContent
74+ key = { String ( evt ) }
75+ value = { String ( evt ) }
76+ className = "mt-0.5"
77+ >
78+ < div className = "relative" >
79+ < CodeBlock language = "json" >
80+ { formatLog (
81+ gen . generateLogWithOptions ( logType , {
82+ preferredEvent : evt ,
83+ filtering,
84+ } ) ,
85+ ) }
86+ </ CodeBlock >
87+ < div className = "absolute bottom-2 right-3 text-xs text-neutral-500 dark:text-neutral-400 flex items-center gap-2 bg-white/60 dark:bg-neutral-900/60 px-2 py-1 rounded" >
88+ < label
89+ className = "cursor-pointer select-none"
90+ htmlFor = { inputId }
91+ >
92+ Apply filtering
93+ </ label >
94+ < input
95+ aria-label = "Apply filtering"
96+ type = "checkbox"
97+ className = "cursor-pointer"
98+ id = { inputId }
99+ checked = { filtering }
100+ onChange = { ( e ) => setFiltering ( e . target . checked ) }
101+ />
102+ </ div >
87103 </ div >
88- </ div >
89- </ TabsContent >
90- ) ) }
104+ </ TabsContent >
105+ ) ;
106+ } ) }
91107 </ Tabs >
92108 </ div >
93109 ) ;
0 commit comments