Sai Kiran Vella
70 lines
2.0 KiB
Svelte
70 lines
2.0 KiB
Svelte
<script>
|
|
import { fmtPE } from '$lib/utils.js';
|
|
let { ctx } = $props();
|
|
|
|
// Flat list of chips so the template stays declarative
|
|
const chips = $derived([
|
|
{ label: '10Y', value: ctx.riskFreeRate?.toFixed(2) + '%' },
|
|
{ label: 'VIX', value: ctx.vixLevel?.toFixed(1) },
|
|
{ label: 'S&P', value: ctx.sp500Price?.toLocaleString() },
|
|
{ label: 'S&P P/E', value: fmtPE(ctx.benchmarks?.marketPE?.toFixed(1)) },
|
|
{ label: 'Tech P/E', value: fmtPE(ctx.benchmarks?.techPE?.toFixed(1)) },
|
|
{ label: 'REIT Yld', value: ctx.benchmarks?.reitYield?.toFixed(2) + '%' },
|
|
{ label: 'IG Sprd', value: ctx.benchmarks?.igSpread?.toFixed(2) + '%' },
|
|
{ label: 'Rates', value: ctx.rateRegime, regime: ctx.rateRegime },
|
|
{ label: 'Vol', value: ctx.volatilityRegime, regime: ctx.volatilityRegime },
|
|
]);
|
|
</script>
|
|
|
|
<div class="ctx-strip">
|
|
{#each chips as chip}
|
|
<div class="ctx-chip">
|
|
<span class="ctx-label">{chip.label}</span>
|
|
<span class="ctx-val" class:ctx-regime={!!chip.regime} data-regime={chip.regime ?? ''}>
|
|
{chip.value ?? '—'}
|
|
</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.ctx-strip {
|
|
display: flex;
|
|
gap: 1px;
|
|
background: var(--border);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ctx-chip {
|
|
flex: 1;
|
|
min-width: 70px;
|
|
background: var(--bg-base);
|
|
padding: 10px var(--space-lg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
.ctx-label {
|
|
font-size: var(--fs-2xs);
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-dimmer);
|
|
}
|
|
|
|
.ctx-val {
|
|
font-size: var(--fs-lg);
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.ctx-regime[data-regime='HIGH'] { color: var(--red); }
|
|
.ctx-regime[data-regime='NORMAL'] { color: var(--text-muted); }
|
|
.ctx-regime[data-regime='LOW'] { color: var(--green); }
|
|
</style>
|