File size: 2,083 Bytes
76ea2b9
6294700
 
76ea2b9
5916048
 
5be784e
5916048
5be784e
5916048
5be784e
5916048
5be784e
5916048
76ea2b9
 
 
 
 
 
5916048
6294700
5916048
5be784e
76ea2b9
6294700
5916048
 
5be784e
 
5916048
 
 
 
5be784e
 
6294700
5be784e
6294700
 
5be784e
 
 
6294700
5be784e
6294700
5be784e
6294700
5be784e
 
5916048
 
 
 
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
"use client";
import { Toggle } from "@/components/input/toggle";
import { TextInput } from "@/components/input/input";
import { usePersistentState } from "@/utils/usePersistentState";

export const Request = ({
  parameters,
  children,
  onChange,
}: {
  parameters: any;
  children: React.ReactElement;
  onChange: (key: string, value: string | boolean) => void;
}) => {
  const [headers, setHeaders] = usePersistentState("headers", {
    Authorization: "hf_api_key",
  });

  console.log(headers);

  return (
    <div className="h-full bg-slate-900 p-5">
      {children}
      {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}
                      onChange={(e) => onChange(key, e)}
                    />
                  </div>
                ) : (
                  <TextInput
                    value={value as string}
                    label={key}
                    placeholder="value"
                    onChange={(e) => onChange(key, e)}
                  />
                )}
              </div>
            ))}
        </div>
      )}
      <div className="mt-8 grid grid-cols-1 gap-6 w-full">
        <p className="text-slate-200 uppercase text-xs font-semibold">
          Headers
        </p>
        <TextInput
          value={headers?.Authorization}
          label="Authorization"
          placeholder="Authorization"
          onlyAlphaNumeric={false}
          onChange={(Authorization) =>
            setHeaders({ ...headers, Authorization })
          }
        />
      </div>
    </div>
  );
};