┌─ ASTRO ───────────────────────────────────────────────────────────────────[ COPY ]─┐
│ ---                                                                                │
│ import "./KpiCard.scss";                                                           │
│                                                                                    │
│ interface Props {                                                                  │
│   label: string;                                                                   │
│   value: string | number;                                                          │
│   sublabel?: string;                                                               │
│ }                                                                                  │
│                                                                                    │
│ const { label, value, sublabel } = Astro.props;                                    │
│                                                                                    │
│ const displayValue =                                                               │
│   typeof value === "number" ? value.toLocaleString("en-US") : value;               │
│ ---                                                                                │
│                                                                                    │
│ <article class="kpi-card">                                                         │
│   <span class="kpi-card__label">{label}</span>                                     │
│   <span class="kpi-card__value">{displayValue}</span>                              │
│   {sublabel && <span class="kpi-card__sublabel">{sublabel}</span>}                 │
│ </article>                                                                         │
└────────────────────────────────────────────────────────────────────────────────────┘

┌─ ASTRO ─────────────────────────────[ COPY ]─┐
│ ---                                          │
│ import "./KpiCard.scss";                     │
│                                              │
│ interface Props {                            │
│   label: string;                             │
│   value: string | number;                    │
│   sublabel?: string;                         │
│ }                                            │
│                                              │
│ const { label, value, sublabel } = Astro.pro │
│ ps;                                          │
│                                              │
│ const displayValue =                         │
│   typeof value === "number" ? value.toLocale │
│ String("en-US") : value;                     │
│ ---                                          │
│                                              │
│ <article class="kpi-card">                   │
│   <span class="kpi-card__label">{label}</spa │
│ n>                                           │
│   <span class="kpi-card__value">{displayValu │
│ e}</span>                                    │
│   {sublabel && <span class="kpi-card__sublab │
│ el">{sublabel}</span>}                       │
│ </article>                                   │
└──────────────────────────────────────────────┘