spb/fetcha

1"use client";2import * as React from "react";3import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";45/** Client shell for the request detail tabs; each panel is server-rendered and passed in as a node. */6export function RequestDetailTabs({ overview, attempts, headers, timing, attemptCount, headerCount }: { overview: React.ReactNode; attempts: React.ReactNode; headers: React.ReactNode; timing: React.ReactNode; attemptCount: number; headerCount: number }) {7  return (8    <Tabs defaultValue="overview">9      <TabsList variant="underline">10        <TabsTrigger value="overview">Overview</TabsTrigger>11        <TabsTrigger value="attempts">12          Attempts <span className="font-mono text-[11px] text-fg-subtle">{attemptCount}</span>13        </TabsTrigger>14        <TabsTrigger value="headers">15          Headers <span className="font-mono text-[11px] text-fg-subtle">{headerCount}</span>16        </TabsTrigger>17        <TabsTrigger value="timing">Timing</TabsTrigger>18      </TabsList>19      <TabsContent value="overview">{overview}</TabsContent>20      <TabsContent value="attempts">{attempts}</TabsContent>21      <TabsContent value="headers">{headers}</TabsContent>22      <TabsContent value="timing">{timing}</TabsContent>23    </Tabs>24  );25}26