Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 1,640 Bytes
b2ecf7d |
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 |
<script lang="ts">
import { fly } from "svelte/transition";
interface Output {
aggregator?: string;
answer: string;
coordinates: [number, number][];
cells: number[];
}
export let output: Output;
export let isAnswerOnlyOutput: boolean;
</script>
<div
class="col-span-12 flex h-10 items-center overflow-x-auto rounded-t-lg border border-b-0 bg-gradient-to-r to-white px-3 dark:to-gray-950 {!!output
?.cells?.length || isAnswerOnlyOutput
? 'via-green border-green-50 from-green-50 dark:border-green-800 dark:from-green-800'
: 'via-red border-red-50 from-red-50 dark:border-red-800 dark:from-red-800'}"
in:fly
>
{#if isAnswerOnlyOutput}
<span
class="ml-2 whitespace-nowrap rounded border border-green-200 bg-green-100 px-1 leading-tight text-green-800 dark:border-green-700 dark:bg-green-800 dark:text-green-100"
>{output.answer}</span
>
{:else}
<span class="whitespace-nowrap">
{#if output.cells.length}
{output.cells.length}
match{output.cells.length > 1 ? "es" : ""}
:
{:else}
No matches
{/if}
</span>
{#if output.cells.length}
{#each output.cells as answer}
<span
class="ml-2 whitespace-nowrap rounded border border-green-200 bg-green-100 px-1 leading-tight text-green-800 dark:border-green-700 dark:bg-green-800 dark:text-green-100"
>{answer}</span
>
{/each}
{#if output.aggregator !== "NONE"}
<span
class="ml-auto whitespace-nowrap rounded border border-blue-200 bg-blue-100 px-1 leading-tight text-blue-800 dark:border-blue-700 dark:bg-blue-800 dark:text-blue-100"
>{output.aggregator}</span
>
{/if}
{/if}
{/if}
</div>
|