hedena_gold/apps/user-app-v2/src/components/home/RateStrip.vue

<!--
  Live 18k gold rate strip. Real data: GET /pricing/latest (PricingController).
  The strip degrades to a quiet placeholder when the quote endpoint has no
  data yet, rather than rendering a fabricated number.
-->
<template>
  <div class="rate-strip" :class="{ 'is-empty': !quote, 'rate-strip--compact': compact }">
    <div class="rate-strip__label">
      <span class="rate-strip__dot" aria-hidden="true"></span>
      نرخ طلای ۱۸ عیار
    </div>

    <div v-if="quote" class="rate-strip__value">
      <span class="rate-strip__num">{{ price(perGram) }}</span>
      <span class="rate-strip__unit">ریال / گرم</span>
    </div>
    <div v-else class="rate-strip__value rate-strip__value--muted">در انتظار اعلام نرخ</div>

    <div v-if="quote" class="rate-strip__time">{{ jdate(quote.quotedAt) }}</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { price, jdate } from '../../utils/filters'
import type { GoldPriceQuote } from '../../api/client'

// `compact` is the home header's variant: a small inline pill that sits beside
// the logo. The default full-width card is still what DashboardView renders.
const props = defineProps<{ quote: GoldPriceQuote | null; compact?: boolean }>()

// pricePerGramRial is a decimal string from the ledger — never parsed into a
// float for display, only trimmed of any fractional tail.
const perGram = computed(() => (props.quote ? props.quote.pricePerGramRial.split('.')[0] : ''))
</script>

<style scoped lang="less">
.rate-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: @ink;
  color: #fff;
  box-shadow: 0 10px 24px -18px rgba(20, 22, 26, 0.9);
}

// Header variant: a compact pill beside the logo.
//
// It deliberately does NOT reuse the dark card treatment. In the header the
// pill sits next to the brand mark on a light bar, and a near-black slab there
// outweighs the logo and clashes with it — @ink is a neutral black while the
// logo and the rest of the page are @primary navy, so the two darks read as
// two unrelated colours. This variant instead tints the page's own navy: a
// pale navy wash, navy text, a hairline navy border. Same family as everything
// around it, and light enough that the logo stays the heaviest thing in the
// bar.
.rate-strip--compact {
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  box-shadow: none;
  background: fade(@primary, 6%);
  border: 1px solid fade(@primary, 10%);
  color: @primary;
}

.rate-strip--compact .rate-strip__label {
  font-size: 11px;
  font-weight: 500;
  // Softer than the number, so the eye lands on the rate first.
  color: fade(@primary, 62%);
}

.rate-strip--compact .rate-strip__num {
  font-size: 12.5px;
  font-weight: 700;
  color: @primary;
}

.rate-strip--compact .rate-strip__value {
  margin-inline-start: 0;
}

// The live dot picks up the page's gold accent rather than the wine red, which
// appears nowhere else in the header.
.rate-strip--compact .rate-strip__dot {
  width: 5px;
  height: 5px;
  background: @secondary;
  box-shadow: none;
  animation: none;
}

.rate-strip--compact .rate-strip__value--muted {
  font-size: 11px;
  color: fade(@primary, 45%);
}

.rate-strip--compact .rate-strip__unit,
.rate-strip--compact .rate-strip__time {
  display: none;
}

.rate-strip__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
}

.rate-strip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: @wineSoft;
  box-shadow: 0 0 0 0 rgba(163, 60, 85, 0.65);
  animation: ratePulse 2.4s ease-out infinite;
}

.rate-strip__value {
  margin-inline-start: auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.rate-strip__value--muted {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.rate-strip__num {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.rate-strip__unit {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}

.rate-strip__time {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.42);
  padding-inline-start: 10px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}

@keyframes ratePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(163, 60, 85, 0.6);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(163, 60, 85, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(163, 60, 85, 0);
  }
}
</style>