File size: 1,027 Bytes
c126239 | 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 | <script lang="ts">
let {
text,
kind = 'neutral',
selected = false,
title = '',
onclick,
}: {
text: string;
kind?: 'green' | 'red' | 'neutral';
selected?: boolean;
title?: string;
onclick?: () => void;
} = $props();
const cls = $derived(
kind === 'green' ? 'tok-green' : kind === 'red' ? 'tok-red' : 'tok-neutral',
);
const display = $derived(text.replace(/\n/g, '\\n').trim() || text || '␣');
</script>
<button class="chip mono {cls}" class:sel={selected} {title} onclick={() => onclick?.()}>
{display}
</button>
<style>
.chip {
padding: 1px 6px;
border: 1px solid transparent;
border-radius: 4px;
font-size: 12.5px;
line-height: 1.6;
cursor: pointer;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chip:hover {
border-color: var(--accent);
background-image: none;
}
.chip.sel {
border-color: var(--accent);
outline: 2px solid var(--accent-soft);
}
</style>
|