sova-devtools 0.1.10

In-app DevTools bar for Sova (HTML inject, SSE timeline, request snapshots)
Documentation 
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

<script setup lang="ts">
import { computed, type Component } from "vue";
import { Inbox } from "@lucide/vue";
import Icon from "./Icon.vue";

const props = defineProps<{
  title: string;
  hint?: string;
  icon?: Component;
}>();

const resolvedIcon = computed(() => props.icon ?? Inbox);
</script>

<template>
  <div
    class="flex flex-col items-center justify-center gap-2 px-4 py-10 text-center"
  >
    <div
      class="flex h-10 w-10 items-center justify-center rounded-full border border-[var(--dt-border)] bg-[var(--dt-surface)] text-[var(--dt-faint)]"
    >
      <Icon :icon="resolvedIcon" :size="18" />
    </div>
    <p class="m-0 text-[13px] font-medium text-[var(--dt-muted)]">{{ title }}</p>
    <p v-if="hint" class="m-0 max-w-sm text-[11px] text-[var(--dt-faint)]">
      {{ hint }}
    </p>
  </div>
</template>