Spaces:
Running
Running
File size: 6,191 Bytes
37e0123 07a1325 37e0123 4721dfc 37e0123 4721dfc 37e0123 4721dfc 37e0123 4721dfc 37e0123 4721dfc 37e0123 4721dfc 37e0123 4721dfc 37e0123 4721dfc 37e0123 07a1325 4721dfc 07a1325 4721dfc 07a1325 37e0123 4721dfc 37e0123 4721dfc 37e0123 4721dfc 37e0123 4721dfc 37e0123 4721dfc 37e0123 4721dfc 37e0123 4721dfc 37e0123 |
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
<!-- 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> |