spb/fetcha

1"use client";2import * as React from "react";3import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";4import { CodeBlock, type CodeLang } from "@/components/ui/code-block";5import { Badge } from "@/components/ui/badge";67const REQUEST_SAMPLES: Array<{ id: string; label: string; lang: CodeLang; title: string; code: string }> = [8  {9    id: "curl",10    label: "cURL",11    lang: "bash",12    title: "terminal",13    code: `curl -X POST https://www.fetcha.co/v1/fetch \\14  -H "Authorization: Bearer fch_live_..." \\15  -H "Content-Type: application/json" \\16  -d '{ "url": "https://example.com", "country": "CA" }'`,17  },18  {19    id: "javascript",20    label: "JavaScript",21    lang: "javascript",22    title: "fetch.mjs",23    code: `import { Fetcha } from "@fetcha/sdk";2425const fetcha = new Fetcha({ apiKey: process.env.FETCHA_API_KEY });2627const res = await fetcha.fetch({28  url: "https://example.com",29  country: "CA",30});3132console.log(res.status, res.metadata.network); // 200 "residential"`,33  },34  {35    id: "python",36    label: "Python",37    lang: "python",38    title: "fetch.py",39    code: `import os40from fetcha import Fetcha4142client = Fetcha(api_key=os.environ["FETCHA_API_KEY"])4344res = client.fetch("https://example.com", country="CA")4546print(res.status, res.metadata.network)  # 200 residential`,47  },48];4950const RESPONSE_SAMPLE = `{51  "request_id": "req_01j8x4k2m9v7q3",52  "success": true,53  "status": 200,54  "url": "https://example.com",55  "final_url": "https://example.com/",56  "content_type": "text/html; charset=utf-8",57  "metadata": {58    "network": "residential",59    "country": "CA",60    "attempts": 1,61    "duration_ms": 842,62    "bytes": 125663  }64}`;6566export function HeroCodeTabs() {67  return (68    <div className="rounded-xl border border-border bg-bg-elevated p-2 shadow-lg dark:shadow-none">69      <Tabs defaultValue="curl">70        <div className="flex flex-wrap items-center justify-between gap-2 px-1.5 pt-1.5">71          <TabsList aria-label="Request example language" className="h-8">72            {REQUEST_SAMPLES.map((s) => (73              <TabsTrigger key={s.id} value={s.id} className="[[data-variant=pill]_&]:h-6 [[data-variant=pill]_&]:px-2.5 [[data-variant=pill]_&]:text-[12.5px]">74                {s.label}75              </TabsTrigger>76            ))}77          </TabsList>78          <div className="flex items-center gap-2 pr-1 font-mono text-[11.5px] text-fg-subtle">79            <span className="rounded-sm bg-accent-soft px-1.5 py-0.5 font-semibold text-accent">POST</span>80            <span className="truncate">/v1/fetch</span>81          </div>82        </div>83        {REQUEST_SAMPLES.map((s) => (84          <TabsContent key={s.id} value={s.id} className="mt-2">85            <CodeBlock code={s.code} lang={s.lang} title={s.title} className="rounded-lg" />86          </TabsContent>87        ))}88      </Tabs>89      <div className="mt-2">90        <div className="mb-1.5 flex items-center justify-between px-1.5">91          <span className="text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">Response</span>92          <Badge variant="success" dot className="font-mono">93            200 · 842 ms94          </Badge>95        </div>96        <CodeBlock code={RESPONSE_SAMPLE} lang="json" title="application/json" className="rounded-lg" maxHeight={260} />97      </div>98    </div>99  );100}101