src/lib/components/snippets/Curl.svelte

<script lang="ts">
  import Icon from '@iconify/svelte';
  import Highlight from "svelte-highlight";
  import powershell from "svelte-highlight/languages/powershell";
  import { env } from '$env/dynamic/public'


  export let body: Record<string, any>;
  export let endpoint: string;
  export let headers: Record<string, any>;
  export let onCopyToClipboard: (e: string) => void;

  let isCopied: boolean = false;

  const generateCurlRequestFromEndpoint = (body: Record<string, any>) => {
    const fullpath = `${env.PUBLIC_INFERENCE_API_URL}/models/${endpoint}`;
    delete body.model
    return `curl -X POST "${fullpath}" \\
  -H ${JSON.stringify(headers)}
  -d ${JSON.stringify(body)}
`;
  };

  const handleCopy = () => {
    onCopyToClipboard(generateCurlRequestFromEndpoint(body));
    isCopied = true
    setTimeout(() => {
      isCopied = false
    }, 1000);
  };

  $: code = generateCurlRequestFromEndpoint(body)
</script>

<div class="bg-slate-900/50 rounded-xl overflow-hidden">
  <header class="bg-slate-900 flex items-center justify-start px-5 py-4 uppercase gap-2 text-slate-300">
    <Icon icon="icon-park-outline:code-brackets" class="text-xl" />
    <p class="text-xs font-semibold">Curl</p>
  </header>
  <main class="px-6 py-6">
    <Highlight language={powershell} {code} />
    <button class="flex justify-end relative w-full" on:click={handleCopy}>
      <Icon icon="solar:copy-bold-duotone" class="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75 w-5 h-5" />
      <div
        class="bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200"
        class:opacity-0={!isCopied}
      >
        Copied!
      </div>
    </button>
  </main>
</div>