A compact HTTP request composer with method, URL, headers, query parameters and body, that shows the assembled request URL beneath an editable set of query rows.
"use client";
import { RequestBuilder } from "@/components/ui/request-builder";
import { useState } from "react";
export default function RequestBuilderDemo() {
const [method, setMethod] = useState("POST");
const [url, setUrl] = useState("https://api.example.com/v1/users");
const [params, setParams] = useState([
{ id: "p1", name: "page", value: "2", enabled: true },
{ id: "p2", name: "limit", value: "20", enabled: true },
]);
const [headers, setHeaders] = useState([
{
id: "h1",
name: "Authorization",
value: "Bearer sk_live_51Hc9…",
enabled: true,
},
{
id: "h2",
name: "Content-Type",
value: "application/json",
enabled: true,
},
]);
const [body, setBody] = useState(
'{\n "name": "Ada Lovelace",\n "role": "admin"\n}',
);
const [sending, setSending] = useState(false);
return (
<div className="flex w-full items-center justify-center p-6">
<RequestBuilder
className="w-full max-w-xl"
method={method}
onMethodChange={setMethod}
url={url}
onUrlChange={setUrl}
params={params}
onParamsChange={setParams}
headers={headers}
onHeadersChange={setHeaders}
body={body}
onBodyChange={setBody}
sending={sending}
onSend={() => {
setSending(true);
setTimeout(() => setSending(false), 800);
}}
/>
</div>
);
}