Creating reusable tabs with size and style options
Creating reusable tabs with size and style options
Agent
OpenCode
Model
Gemini Pro
Shared
Feb 3, 6:42 PM
Messages106
since we're rendering the tabs for the highlihgt/everything tab like 3 times, we should make a component for it
it should have a size (default or small) and variant prop (default or icon)
call it TraceViewTabs
actually call it TraceToggle
The highlights/everything tab logic has been extracted into a new reusable component called TraceToggle (located at frontend/components/filters/TraceToggle.tsx). It supports size ("default" or "small") and variant ("default" or "icon") props as requested.
The component is now used in:
TraceOverview.tsx (both in the main header and the mini header)frontend/app/s/[id]/page.tsx (for mobile view)The TraceToggle component has been refactored to use Next.js Link components instead of client-side state updates.
Key changes:
TraceToggle.tsx:
TabsButton with TabsLink.createLink prop to generate filter URLs dynamically.onChange prop as navigation is now handled via href.TraceOverview.tsx:
createFilterLink prop to the interface and component.createFilterLink down to TraceToggle.frontend/app/s/[id]/page.tsx:
createFilterLink function using useCallback to generate URLs based on search params.createFilterLink to TraceOverview and the mobile TraceToggle.