drop/server/components/LogLine.vue

<template>
  <span class="text-xs font-mono text-zinc-400 inline-flex items-top gap-x-2"
    ><span v-if="!short" class="text-zinc-500">{{ log.time }}</span>
    <span
      :class="[
        colours[log.level] || 'text-green-400',
        'uppercase font-display font-semibold',
      ]"
      >{{ log.level }}</span
    >
    <span v-if="log.prefix" class="text-zinc-200"> {{ log.prefix }}</span>
    <pre :class="[short ? 'line-clamp-1' : '', 'mt-[1px]']">{{ log.msg }}</pre>
  </span>
</template>

<script setup lang="ts">
import type { TaskLog } from "~/server/internal/tasks";

defineProps<{ log: typeof TaskLog.infer; short?: boolean }>();

const colours: { [key: string]: string } = {
  info: "text-blue-400",
  warn: "text-yellow-400",
  error: "text-red-400",
};
</script>