47 lines
1.3 KiB
Svelte
47 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import ChevronDown from "@lucide/svelte/icons/chevron-down";
|
|
import ChevronsDown from "@lucide/svelte/icons/chevrons-down";
|
|
import Flame from "@lucide/svelte/icons/flame";
|
|
import { isHot, PRIORITY_LABEL } from "../lib/vocab";
|
|
import type { Priority } from "../model/types";
|
|
import { cn } from "../lib/utils";
|
|
|
|
interface Props {
|
|
class?: string;
|
|
priority: Priority;
|
|
}
|
|
|
|
let { priority, class: className }: Props = $props();
|
|
|
|
const bars = $derived(Math.max(0, priority - 2));
|
|
</script>
|
|
|
|
<span
|
|
class={cn(
|
|
"inline-flex items-end gap-px",
|
|
className,
|
|
isHot(priority) && "text-destructive",
|
|
)}
|
|
title={PRIORITY_LABEL[priority]}
|
|
>
|
|
{#if isHot(priority)}
|
|
<Flame aria-hidden="true" class="size-3.5" />
|
|
{:else if priority === 1}
|
|
<ChevronDown aria-hidden="true" class="size-3.5" />
|
|
{:else if priority === 0}
|
|
<ChevronsDown aria-hidden="true" class="size-3.5" />
|
|
{:else}
|
|
{#each [3, 5, 7] as height, index (height)}
|
|
<span
|
|
aria-hidden="true"
|
|
class={cn(
|
|
"w-[3px] rounded-[1px] bg-current transition-opacity",
|
|
index < bars ? "opacity-100" : "opacity-25",
|
|
)}
|
|
style="height: {height}px"
|
|
></span>
|
|
{/each}
|
|
{/if}
|
|
<span class="sr-only">{PRIORITY_LABEL[priority]}</span>
|
|
</span>
|