1 files changed, 34 insertions, 0 deletions
diff --git a/source/library/components/HeadersEditor.svelte b/source/library/components/HeadersEditor.svelte
new file mode 100644
index 0000000..fc3a193
--- /dev/null
+++ b/source/library/components/HeadersEditor.svelte
@@ -0,0 +1,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>