src/lib/components/translation/Response.svelte

<script lang="ts">
  import Icon from '@iconify/svelte';
  import Highlight from "svelte-highlight";
  import json from "svelte-highlight/languages/json";
  import "svelte-highlight/styles/night-owl.css"
  
  import Loading from "$lib/components/Loading.svelte"
  import CodePreview from '$lib/components/CodePreview.svelte';
	import Preview from '$lib/components/text-generation/Preview.svelte';

  export let loading: boolean;
  export let res: any;
  export let form: Record<string, any>;
  export let body: Record<string, any>;
  export let endpoint: string;

  let tab = 0

  $: code = JSON.stringify(res ?? {}, null, 2)

  let TABS = [
  {
    label: "Formatted preview",
    icon: "material-symbols:preview",
  },
  {
    label: "Code example",
    icon: "carbon:code",
  },
];
</script>

<div class="lg:h-screen flex flex-col relative">
  <div class="w-full jsonResponse relative">
    <div class="bg-slate-950 w-full uppercase px-5 py-4 text-zinc-400 text-sm font-semibold border-b border-slate-900 flex items-center justify-start gap-2">
      <Icon icon="carbon:json" class="w-5 h-5" />
      Response
    </div>
    <Highlight language={json} {code}>
    </Highlight>
    {#if loading}
      <Loading>
        <p class="text-slate-400 text-lg mt-4">Processing...</p>
      </Loading>
    {/if}
  </div>
  <div class="bg-slate-950 overflow-auto flex-1">
    <div class="w-full uppercase text-zinc-400 text-sm font-semibold border-t border-slate-900 flex items-start sticky top-0 bg-slate-950">
      {#each TABS as { label, icon }, idx }
      <button
        class={`flex items-center justify-start gap-2 px-5 border-r py-4 border-slate-900 bg-slate-900/40 cursor-pointer hover:bg-slate-900/60 transition-all duration-200 ${tab === idx ? '!bg-slate-950 hover:bg-slate-900/40' : 'border-b'}`}
        on:click={() => tab = idx}
      >
        <Icon icon={icon} class="w-5 h-5" />
        {label}
      </button>
      {/each}
      <div class="flex flex-1 w-full pointer-events-none text-slate-950 border-b border-slate-900 h-[53px] bg-slate-900/40"></div>
    </div>
    {#if tab === 0}
      <Preview body={body} res={res} />
      {:else if tab === 1}
      <CodePreview body={form} endpoint={endpoint} />
    {/if}
  </div>
</div>