src/lib/components/result/space/Runtime.svelte

<script lang="ts">
	import Icon from "@iconify/svelte";
  import type { Author } from "$lib/types";

  export let runtime: any;

  const renderBadge = (stage: string) => {
    switch (stage) {
      case "RUNNING_BUILDING":
        return "bg-blue-500/30 text-blue-600";
      case "RUNNING":
        return "bg-green-500/30 text-green-600";
      case "ERROR":
        return "bg-red-500/30 text-red-600";
      default:
        return "bg-gray-500/30 text-gray-600";
    }
  }
</script>

<div class="rounded-2xl bg-white dark:bg-zinc-900 p-5 shadow col-span-3">
  <div class="flex w-full justify-between items-start mb-4">
    <div class="text-zinc-700 dark:text-zinc-300 flex items-center gap-2">
      <Icon icon="solar:settings-bold-duotone" class="w-6 h-6" />
      <p class="font-semibold text-sm uppercase tracking-wider">Runtime config</p>
    </div>
    <div class={`${renderBadge(runtime.stage)} font-semibold font-title text-sm px-3 py-1 rounded-full`}>
      {runtime.stage}
    </div>
  </div>
  <div class="w-full">
    <div class="grid grid-cols-2 gap-4">
      {#if runtime.hardware}
        <div class="border rounded-lg border-zinc-300/70 dark:border-zinc-800 p-3 flex items-center justify-start gap-3">
          <Icon icon="solar:diskette-bold-duotone" class="w-6 h-6 text-gray-500 dark:text-white" />
          <p class="uppercase text-sm text-black/60 dark:text-zinc-300 font-semibold font-title truncate">
            Hardware: {runtime.hardware.current}
          </p>
        </div>
      {/if}
      {#if runtime.storage}
        <div class="border rounded-lg border-zinc-300/70 dark:border-zinc-800 p-3 flex items-center justify-start gap-3">
          <Icon icon="solar:cloud-storage-bold-duotone" class="w-6 h-6 text-gray-500 dark:text-white" />
          <p class="uppercase text-sm text-black/60 dark:text-zinc-300 font-semibold font-title truncate">
            Storage: {runtime.storage.current}
          </p>
        </div>
      {/if}
    </div>
  </div>
</div>