"use client"; import { useState } from "react"; import { Options } from "redaxios"; import { Toggle } from "@/components/input/toggle"; import { TextInput } from "@/components/input/input"; import { usePersistentState } from "@/utils/usePersistentState"; import { ApiRoute, Body } from "@/utils/type"; import { useUpdateEffect } from "react-use"; import { Snippet } from "./snippet"; import { Tabs } from "./tabs"; import Link from "next/link"; export const Request = ({ parameters, formattedBody, formattedEndpoint, onBodyChange, endpoint, children, onParamsChange, }: { parameters: Record; children: React.ReactElement; formattedBody: Options | undefined; endpoint: ApiRoute; formattedEndpoint: string; onBodyChange: (o: Options) => void; onParamsChange: (key: string, value: string | boolean) => void; }) => { const [tab, setTab] = useState<"headers" | "parameters" | "body" | "snippet">( endpoint?.parameters ? "parameters" : endpoint?.body ? "body" : "headers" ); const [headers, setHeaders] = usePersistentState("headers", { Authorization: "", }); const [bodyForm, setBodyForm] = useState({}); useUpdateEffect(() => onBodyChange(bodyForm), [bodyForm]); return (
{children}
{tab === "parameters" && parameters && (

Optional parameters

{parameters && Object.entries(parameters).map(([key, value]) => (
{typeof value === "boolean" ? (
onParamsChange(key, e)} />
) : ( onParamsChange(key, e)} /> )}
))}
)} {tab === "body" && endpoint?.body?.length && (

Body

{endpoint?.body?.length && endpoint?.body.map((b, key) => (
{typeof b.defaultValue === "boolean" ? (
setBodyForm({ ...bodyForm, [b.key]: e }) } />
) : ( setBodyForm({ ...bodyForm, [b.key]: e })} /> )}
))}
)} {tab === "headers" && (

Headers

setHeaders({ ...headers, Authorization }) } /> Get my Hugging Face token
)} {tab === "snippet" && ( )}
); };