wip space result

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

@@ -0,0 +1,102 @@
+<!-- enzostvs/stable-diffusion-tpu -->
+<script lang="ts">
+	import Icon from "@iconify/svelte";
+
+  const cardData: {
+    app_port?: number;
+    colorFrom?: string;
+    colorTo?: string;
+    bgFrom?: string;
+    bgTo?: string;
+    emoji?: string;
+    title?: string;
+    sdk?: string;
+    license?: string;
+    pinned?: boolean;
+  } = {
+    app_port: 8501,
+    colorFrom: "from-pink-600",
+    colorTo: "to-blue-600",
+    bgFrom: "bg-pink-600",
+    bgTo: "bg-blue-700",
+    emoji: "🔥",
+    title: "Stable Diffusion TPU",
+    sdk: "tensorflow",
+    license: "Apache-2.0",
+    pinned: true,
+  };
+
+</script>
+
+<div class="rounded-2xl bg-white p-6 shadow col-span-2">
+  <div class="text-zinc-700 flex items-center gap-2 mb-4">
+    <Icon icon="la:readme" class="w-6 h-6" />
+    <p class="font-semibold text-sm">README.md</p>
+  </div>
+  <div class="grid grid-cols-3 gap-4">
+    {#if cardData?.bgFrom}
+      <div class="border rounded-lg border-zinc-300/70 p-3 flex items-center justify-start gap-3">
+        <div class={`w-6 h-6 rounded ${cardData.bgFrom}`}></div>
+        <p class="uppercase text-sm text-black/60 font-semibold font-title">
+          Primary color
+        </p>
+      </div>
+    {/if}
+    {#if cardData?.bgTo}
+      <div class="border rounded-lg border-zinc-300/70 p-3 flex items-center justify-start gap-3">
+        <div class={`w-6 h-6 rounded ${cardData.bgTo}`}></div>
+        <p class="uppercase text-sm text-black/60 font-semibold font-title">
+          Secondary color
+        </p>
+      </div>
+    {/if}
+    {#if cardData?.colorFrom && cardData?.colorTo}
+      <div class="border rounded-lg border-zinc-300/70 p-3 flex items-center justify-start gap-3">
+        <div class={`w-6 h-6 rounded bg-gradient-to-br ${cardData.colorFrom} ${cardData.colorTo}`}></div>
+        <p class="uppercase text-sm text-black/60 font-semibold font-title">
+          Gradient color
+        </p>
+      </div>
+    {/if}
+    {#if cardData?.emoji}
+      <div class="border rounded-lg border-zinc-300/70 p-3 flex items-center justify-start gap-3">
+        <p class="w-6 h-6 text-center scale-125">{cardData.emoji}</p>
+        <p class="uppercase text-sm text-black/60 font-semibold font-title">
+          Emoji
+        </p>
+      </div>
+    {/if}
+    {#if cardData?.sdk}
+      <div class="border rounded-lg border-zinc-300/70 p-3 flex items-center justify-start gap-3">
+        <Icon icon="tabler:sdk" class="w-6 h-6 text-gray-500" />
+        <p class="uppercase text-sm text-black/60 font-semibold font-title">
+          {cardData.sdk}
+        </p>
+      </div>
+    {/if}
+    {#if cardData?.app_port}
+      <div class="border rounded-lg border-zinc-300/70 p-3 flex items-center justify-start gap-3">
+        <Icon icon="solar:earth-bold-duotone" class="w-6 h-6 text-gray-500" />
+        <p class="uppercase text-sm text-black/60 font-semibold font-title">
+          :{cardData.app_port}
+        </p>
+      </div>
+    {/if}
+    {#if cardData?.license}
+      <div class="border rounded-lg border-zinc-300/70 p-3 flex items-center justify-start gap-3">
+        <Icon icon="solar:shield-bold-duotone" class="w-6 h-6 text-gray-500" />
+        <p class="uppercase text-sm text-black/60 font-semibold font-title">
+          {cardData.license}
+        </p>
+      </div>
+    {/if}
+    {#if typeof cardData?.pinned !== "undefined"}
+      <div class="border rounded-lg border-zinc-300/70 p-3 flex items-center justify-start gap-3">
+        <Icon icon="solar:pin-bold-duotone" class="w-6 h-6 text-gray-500" />
+        <p class="uppercase text-sm text-black/60 font-semibold font-title">
+          {cardData.pinned ? "Pinned" : "Not pinned"}
+        </p>
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import Icon from "@iconify/svelte";
+	import Readme from "./Readme.svelte";
+
+  export let data: Record<string, any> | null = {};
+
+  $: console.log(data);
+</script>
+
+  <div class="grid grid-cols-3 gap-8">
+    <div class="rounded-2xl bg-white p-4 shadow">
+      <div class={`flex flex-col items-center justify-center bg-gradient-to-br p-4 filter brightness-110 rounded-xl relative ${data?.cardData?.colorFrom} ${data?.cardData?.colorTo} h-full`}>
+        <div class="absolute opacity-60 text-8xl mb-2 ">
+          {data?.cardData?.emoji}
+        </div>
+        <p class="z-40 max-w-full truncate text-center font-bold leading-tight text-blue-50 text-2xl" style="text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);">
+          {data?.cardData?.title}  
+        </p>
+      </div>
+    </div>
+    <Readme {...data?.cardData} />
+  </div>

src/routes/+layout.svelte

@@ -25,20 +25,20 @@
 
 <div class="p-0 h-screen flex items-center justify-center gap-6 flex-col relative z-[1]">
   <div class="absolute top-0 left-0 w-full">
-    <div class="container mx-auto flex items-center justify-between px-6 pt-4">
+    <div class="container mx-auto flex items-center justify-between px-6 pt-6">
       <p></p>
       <button
-        class="flex items-center justify-center gap-2 bg-gradient-to-br from-indigo-500 to-teal-500 shadow-sm px-3 py-2.5 rounded-lg text-white dark:text-zinc-950 font-medium font-title text-sm transition-all duration-200 hover:bg-indigo-600"
+        class="flex items-center justify-center gap-2 bg-gradient-to-br from-black dark:from-teal-500 dark:to-indigo-500 to-zinc-700 shadow-sm px-5 py-2.5 rounded-full text-white dark:text-zinc-100 font-medium font-title text-sm transition-all duration-200 hover:bg-indigo-600"
         on:click={() => {
           darkmodeStore.update((v) => !v);
         }}
       >
         {#if $darkmodeStore}
-          <Icon icon="tabler:bulb-off" class="w-5 h-5" />
-          Turn off the lights
-        {:else}
           <Icon icon="heroicons-outline:light-bulb" class="w-5 h-5" />
           Turn on the lights
+        {:else}
+          <Icon icon="tabler:bulb-off" class="w-5 h-5" />
+          Turn off the lights
         {/if}
       </button>
     </div>

src/routes/+page.svelte

@@ -4,19 +4,21 @@
 	import HeroHeader from '$lib/components/HeroHeader.svelte';
 	import Search from '$lib/components/search/Search.svelte';
   import { requestStore } from '$lib/stores/use-request';
+	import Space from '$lib/components/result/space/Space.svelte';
 
   let data = get(requestStore);
 
   requestStore.subscribe((v) => {
     data = v;
   });
-
 </script>
 
 <div class="container w-full grid grid-cols-1 gap-8">
   <HeroHeader />
   <Search />
-  <div class="bg-blue-900 rounded-xl shadow-lg text-white whitespace-pre-wrap p-6 max-w-6xl w-full mx-auto">
-    {JSON.stringify(data)}
-  </div>
+  {#if data?.data}
+    <div class="w-full grid grid-cols-1 gap-8 p-6 max-w-6xl mx-auto">
+      <Space data={data.data} />
+    </div>
+  {/if}
 </div>

src/routes/api/search/+server.ts

@@ -17,6 +17,17 @@ export async function POST({ request }: RequestEvent) {
   if (data.error) {
     throw error(response.status, data.error);
   }
+
+  const formattedData = {
+    ...data,
+    cardData: {
+      ...data.cardData,
+      colorFrom: `from-${data?.cardData?.colorFrom}-600` ?? "from-pink-600",
+      colorTo: `to-${data?.cardData?.colorTo}-600` ?? "to-blue-600",
+      bgFrom: `bg-${data?.cardData?.colorFrom}-600` ?? "bg-pink-600",
+      bgTo: `bg-${data?.cardData?.colorTo}-600` ?? "bg-blue-600",
+    }
+  }
   
-  return json(data);
+  return json(formattedData);
 }