Spaces:
Running
Running
File size: 1,998 Bytes
07a1325 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<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> |