Spaces:
Build error
Build error
File size: 5,322 Bytes
76ea2b9 03ce1cf 6294700 76ea2b9 ff1a29c 03ce1cf ff1a29c 1f228cc 5916048 5be784e 03ce1cf ff1a29c 03ce1cf ff1a29c 5916048 03ce1cf 5916048 ff1a29c 5916048 03ce1cf ff1a29c 03ce1cf 5916048 ff1a29c 76ea2b9 a22946c 76ea2b9 03ce1cf 5916048 ff1a29c ca0baae ff1a29c 6294700 ff1a29c 03ce1cf 5be784e ff1a29c 03ce1cf ff1a29c 03ce1cf ff1a29c 1f228cc ff1a29c 4f085f4 ff1a29c 76ea2b9 5916048 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
"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<string, any>;
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<Options>({});
useUpdateEffect(() => onBodyChange(bodyForm), [bodyForm]);
return (
<div className="h-full bg-slate-900 pb-5 overflow-auto">
<div className="top-0 sticky w-full backdrop-blur">
{children}
<Tabs active={tab} setActive={setTab} endpoint={endpoint} />
</div>
<div className="px-4 xl:px-6">
{tab === "parameters" && parameters && (
<div className="mt-6 grid grid-cols-2 gap-6 w-full">
<p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
Optional parameters
</p>
{parameters &&
Object.entries(parameters).map(([key, value]) => (
<div
key={key}
className="flex items-center justify-between gap-2"
>
{typeof value === "boolean" ? (
<div>
<Toggle
checked={value}
label={key}
tooltip={endpoint?.tooltips?.[key]}
onChange={(e) => onParamsChange(key, e)}
/>
</div>
) : (
<TextInput
value={value as string}
label={key}
tooltip={endpoint?.tooltips?.[key]}
placeholder="value"
onChange={(e) => onParamsChange(key, e)}
/>
)}
</div>
))}
</div>
)}
{tab === "body" && endpoint?.body?.length && (
<div className="mt-6 grid grid-cols-2 gap-6 w-full">
<p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
Body
</p>
{endpoint?.body?.length &&
endpoint?.body.map((b, key) => (
<div
key={key}
className="flex items-center justify-between gap-2"
>
{typeof b.defaultValue === "boolean" ? (
<div>
<Toggle
checked={b.defaultValue}
label={b.key}
onChange={(e) =>
setBodyForm({ ...bodyForm, [b.key]: e })
}
/>
</div>
) : (
<TextInput
value={
(formattedBody?.[
b.key as keyof typeof formattedBody
] as string) ?? (b.defaultValue as string)
}
label={b.key}
placeholder="value"
onChange={(e) => setBodyForm({ ...bodyForm, [b.key]: e })}
/>
)}
</div>
))}
</div>
)}
{tab === "headers" && (
<div className="mt-8 grid grid-cols-1 gap-6 w-full">
<p className="text-slate-200 uppercase text-xs font-semibold">
Headers
</p>
<div className="w-full">
<TextInput
value={headers?.Authorization}
label="Authorization"
placeholder="hf_token"
onlyAlphaNumeric={false}
onChange={(Authorization) =>
setHeaders({ ...headers, Authorization })
}
/>
<Link
href="https://huggingface.co/settings/tokens"
target="_blank"
className="text-blue-500 hover:text-blue-600 text-xs mt-3 block"
>
Get my Hugging Face token
</Link>
</div>
</div>
)}
{tab === "snippet" && (
<Snippet
endpoint={{ ...endpoint, path: formattedEndpoint }}
parameters={parameters}
headers={headers}
body={formattedBody}
/>
)}
</div>
</div>
);
};
|