src/lib/components/spaceheader/SpaceMiniHeader.svelte

<script lang="ts">
	import { onMount } from "svelte";

  let space : any = {}
  let isVisible = false

  onMount(async () => {
    if (window.location.origin !== "https://huggingface.co.") {
      isVisible = true
    }
    const request = await fetch("https://huggingface.co./api/spaces/enzostvs/lora-studio")
    const response = await request.json()
    space = response
  });

</script>
{#if space.id && isVisible}
  <div class="from-gray-50 to-white text-md shadow-alternate fixed right-6 top-5 z-20 flex h-[40px] items-stretch gap-3 overflow-hidden rounded-xl bg-gradient-to-t px-4 py-2 text-gray-500 max-sm:hidden font-other">
    <div class="flex items-center justify-start gap-2">
      <img src={`https://huggingface.co./api/users/${space.author}/avatar`} class="w-3.5 h-3.5 rounded-full flex-none" alt={space.author} />
      <div class="flex items-center justify-center gap-1">
        <a href="https://huggingface.co./{space.author}" class="text-gray-500 hover:text-blue-600 font-other text-base" target="_blank">{space.author}</a>
        <span class="text-gray-300 text-lg font-other">/</span>
        <a href="https://huggingface.co./spaces/{space.id}" target="_blank" class="font-mono font-bold text-gray-800 hover:text-blue-600 font-namespace">{space.id?.split('/').pop()}</a>
      </div>
    </div>
    <div class="inline-flex items-center overflow-hidden whitespace-nowrap rounded-md border bg-white text-sm leading-none text-gray-500  flex-none self-center "><button class="relative flex items-center overflow-hidden from-red-50 to-transparent dark:from-red-900 p-1 focus:outline-none" title="Unlike"><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" fill="currentColor"><path d="M22.45,6a5.47,5.47,0,0,1,3.91,1.64,5.7,5.7,0,0,1,0,8L16,26.13,5.64,15.64a5.7,5.7,0,0,1,0-8,5.48,5.48,0,0,1,7.82,0L16,10.24l2.53-2.58A5.44,5.44,0,0,1,22.45,6m0-2a7.47,7.47,0,0,0-5.34,2.24L16,7.36,14.89,6.24a7.49,7.49,0,0,0-10.68,0,7.72,7.72,0,0,0,0,10.82L16,29,27.79,17.06a7.72,7.72,0,0,0,0-10.82A7.49,7.49,0,0,0,22.45,4Z"></path></svg> <svg class="absolute text-red-500 origin-center transform transition-transform ease-in
						
      " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" fill="currentColor"><path d="M22.5,4c-2,0-3.9,0.8-5.3,2.2L16,7.4l-1.1-1.1C12,3.3,7.2,3.3,4.3,6.2c0,0-0.1,0.1-0.1,0.1c-3,3-3,7.8,0,10.8L16,29l11.8-11.9c3-3,3-7.8,0-10.8C26.4,4.8,24.5,4,22.5,4z"></path></svg> <span class="ml-4 pl-0.5 hidden">like</span></button> <button class="flex items-center border-l px-1.5 py-1 text-gray-400 focus:bg-gray-100 focus:outline-none" title="See users who liked this repository">{space.likes}</button></div>
  </div>
{/if}

<style>
  .font-namespace {
    font-family: "IBM Plex Mono", sans-serif;
  }
  .font-other {
    font-family: "Prout", sans-serif !important;
  }
</style>