source/library/components/HeadersEditor.svelte


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

<script lang="ts">
  import Editor from "./Editor.svelte";
  import type { Extension } from "@codemirror/state";

  type Props = {
    onChange: (value: string) => void;
    theme?: Extension;
    value: string;
  };

  let { onChange, theme, value }: Props = $props();
</script>

<style lang="scss">
  .headers {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
  }

  .label {
    background-color: var(--graphiql-panel, #252526);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    text-transform: uppercase;
  }
</style>

<div class="headers">
  <div class="label">Headers</div>
  <Editor language="json" {onChange} {theme} {value}/>
</div>