Files
market_screener/ui/src/lib/components/shared/SignalBadge.svelte
T

31 lines
918 B
Svelte

<script lang="ts">
import type { Signal } from '$lib/types.js';
let { signal }: { signal: Signal | null | undefined } = $props();
const cls = () => {
if (signal?.includes('Strong')) return 'strong';
if (signal?.includes('Momentum')) return 'momentum';
if (signal?.includes('Speculation')) return 'spec';
if (signal?.includes('Neutral')) return 'neutral';
return 'avoid';
};
</script>
<span class="badge {cls()}">{signal ?? '—'}</span>
<style>
.badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
white-space: nowrap;
}
.strong { background: #14532d33; color: #4ade80; }
.momentum { background: #1e3a5f33; color: #60a5fa; }
.spec { background: #7c2d1233; color: #fb923c; }
.neutral { background: #1e293b; color: #94a3b8; }
.avoid { background: #450a0a33; color: #f87171; }
</style>