Files
FabledScribe/frontend/src/components/PriorityBadge.vue
T
bvandeusen 22a3a3c1d1 Initial commit: note-taking/task-tracking app with LLM integration scaffold
Vue 3 + TypeScript frontend with Pinia stores, markdown rendering (marked + DOMPurify),
wikilink/tag linkification, and autocomplete. Quart async backend with SQLAlchemy 2.0,
PostgreSQL ARRAY columns, task-note companion linking, backlinks, and note-to-task
conversion. Docker Compose setup with PostgreSQL 16 and Ollama.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 23:35:44 -05:00

48 lines
961 B
Vue

<script setup lang="ts">
import type { TaskPriority } from "@/types/task";
const props = defineProps<{
priority: TaskPriority;
}>();
const labels: Record<TaskPriority, string> = {
none: "",
low: "Low",
medium: "Medium",
high: "High",
};
</script>
<template>
<span
v-if="props.priority !== 'none'"
:class="['priority-badge', `priority-${props.priority}`]"
>
{{ labels[props.priority] }}
</span>
</template>
<style scoped>
.priority-badge {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.priority-low {
background: var(--color-priority-low-bg);
color: var(--color-priority-low);
}
.priority-medium {
background: var(--color-priority-medium-bg);
color: var(--color-priority-medium);
}
.priority-high {
background: var(--color-priority-high-bg);
color: var(--color-priority-high);
}
</style>