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

<!-- enzostvs/stable-diffusion-tpu -->
<script lang="ts">
	import Icon from "@iconify/svelte";

  export let app_port: number | undefined;
  export let colorFrom: string | undefined;
  export let colorTo: string | undefined;
  export let bgFrom: string | undefined;
  export let bgTo: string | undefined;
  export let emoji: string | undefined;
  export let title: string | undefined;
  export let sdk: string | undefined;
  export let sdk_version: string | undefined;
  export let license: string | undefined;
  export let pinned: boolean | undefined;
  export let createdAt: string | undefined;

  const formatDate = (date: string) => {
    const d = new Date(date);
    return `${d.toLocaleString("default", { month: "short" })} ${d.getDate()}, ${d.getFullYear()}`;
  }

</script>

<!-- <div class="rounded-2xl bg-white p-4 shadow col-span-2 col-start-1">
  <div class={`flex flex-col items-center justify-center bg-gradient-to-br p-4 filter brightness-110 min-h-[220px] rounded-xl relative ${colorFrom} ${colorTo} h-full`}>
    <div class="absolute opacity-60 text-8xl mb-2 ">
      {emoji}
    </div>
    <p class="z-40 max-w-full text-center font-bold leading-tight text-blue-50 text-2xl" style="text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);">
      {title}  
    </p>
  </div>
</div> -->

<div class="rounded-2xl bg-white dark:bg-zinc-900 p-5 shadow col-span-5 flex items-center justify-start gap-8">
  <div class={`flex flex-col items-center justify-center bg-gradient-to-br p-4 filter brightness-110 min-h-[220px] rounded-xl relative ${colorFrom} ${colorTo} h-full max-w-[420px] w-full`}>
    <div class="absolute opacity-60 text-8xl mb-2 ">
      {emoji}
    </div>
    <p class="z-40 max-w-full text-center font-bold leading-tight text-blue-50 text-2xl" style="text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);">
      {title}  
    </p>
  </div>
  <div class="w-full p-1 py-3">
    <div class="text-zinc-700 dark:text-zinc-300 flex items-center gap-2 mb-4">
      <Icon icon="solar:eye-scan-bold-duotone" class="w-6 h-6" />
      <p class="font-semibold text-sm uppercase tracking-wider">Overview</p>
    </div>
    <div class="grid grid-cols-3 gap-4">
      {#if bgFrom}
        <div class="border rounded-lg border-zinc-300/70 dark:border-zinc-800 p-3 flex items-center justify-start gap-3">
          <div class={`w-6 h-6 rounded ${bgFrom}`}></div>
          <p class="uppercase text-sm text-black/60 dark:text-zinc-300 font-semibold font-title">
            Primary color
          </p>
        </div>
      {/if}
      {#if bgTo}
        <div class="border rounded-lg border-zinc-300/70 dark:border-zinc-800 p-3 flex items-center justify-start gap-3">
          <div class={`w-6 h-6 rounded ${bgTo}`}></div>
          <p class="uppercase text-sm text-black/60 dark:text-zinc-300 font-semibold font-title">
            Secondary color
          </p>
        </div>
      {/if}
      {#if colorFrom && colorTo}
        <div class="border rounded-lg border-zinc-300/70 dark:border-zinc-800 p-3 flex items-center justify-start gap-3">
          <div class={`w-6 h-6 rounded bg-gradient-to-br ${colorFrom} ${colorTo}`}></div>
          <p class="uppercase text-sm text-black/60 dark:text-zinc-300 font-semibold font-title">
            Gradient color
          </p>
        </div>
      {/if}
      {#if createdAt}
        <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:calendar-date-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">
            {formatDate(createdAt)}
          </p>
        </div>
      {/if}
      {#if emoji}
        <div class="border rounded-lg border-zinc-300/70 dark:border-zinc-800 p-3 flex items-center justify-start gap-3">
          <p class="h-6 min-w-[1.5rem] text-center scale-125">{emoji}</p>
          <p class="uppercase text-sm text-black/60 dark:text-zinc-300 font-semibold font-title">
            Emoji
          </p>
        </div>
      {/if}
      {#if sdk}
        <div class="border rounded-lg border-zinc-300/70 dark:border-zinc-800 p-3 flex items-center justify-start gap-3">
          <Icon icon="tabler:sdk" 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">
            {sdk}
          </p>
        </div>
      {/if}
      {#if sdk_version}
        <div class="border rounded-lg border-zinc-300/70 dark:border-zinc-800 p-3 flex items-center justify-start gap-3">
          <Icon icon="tabler:sdk" 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">
            <span class="lowercase">v</span>{sdk_version}
          </p>
        </div>
      {/if}
      {#if app_port}
        <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:earth-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">
            :{app_port}
          </p>
        </div>
      {/if}
      {#if license}
        <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:shield-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">
            {license}
          </p>
        </div>
      {/if}
      {#if typeof pinned !== "undefined"}
        <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:pin-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">
            {pinned ? "Pinned" : "Not pinned"}
          </p>
        </div>
      {/if}
    </div>
  </div>
</div>