Un Componente Simple y Enfocado

No todo componente necesita ser complejo. El PriceBadge es pequeño pero útil — muestra un precio formateado con estilos consistentes. Este patrón aparece en toda la app BookIt: en las tarjetas de servicio, en el resumen de reserva, en el carrito.

Lo Que Aprenderás

Crear un componente utilitario enfocado
Usar valores predeterminados de props de manera efectiva
Agregar variantes de componente con props
Formatear valores dentro de componentes

El PriceBadge Básico

Comienza simple — un componente que muestra un precio:

<!-- filename: src/lib/components/PriceBadge.svelte -->
<script>
  let { price } = $props();
</script>

<span class="price-badge">${price}</span>

<style>
  .price-badge {
    font-weight: bold;
    color: #007bff;
  }
</style>

Uso:

<script>
  import PriceBadge from '$lib/components/PriceBadge.svelte';
</script>

<PriceBadge price={50} />
<!-- Displays: $50 -->

Agregar Soporte de Moneda

¿Qué pasa si necesitas diferentes monedas?

<script>
  let { 
    price, 
    currency = 'USD',
    locale = 'en-US'
  } = $props();
  
  function formatPrice(amount, curr, loc) {
    return new Intl.NumberFormat(loc, {
      style: 'currency',
      currency: curr
    }).format(amount);
  }
  
  let formatted = $derived(formatPrice(price, currency, locale));
</script>

<span class="price-badge">{formatted}</span>

Ahora maneja el formateo automáticamente:

<PriceBadge price={50} />
<!-- $50.00 -->

<PriceBadge price={50} currency="EUR" locale="de-DE" />
<!-- 50,00 € -->

<PriceBadge price={50} currency="GBP" locale="en-GB" />
<!-- £50.00 -->

Agregar Variantes de Tamaño

Diferentes contextos necesitan diferentes tamaños:

<script>
  let { 
    price, 
    currency = 'USD',
    locale = 'en-US',
    size = 'medium'  // 'small' | 'medium' | 'large'
  } = $props();
  
  let formatted = $derived(
    new Intl.NumberFormat(locale, {
      style: 'currency',
      currency
    }).format(price)
  );
</script>

<span class="price-badge size-{size}">{formatted}</span>

<style>
  .price-badge {
    font-weight: bold;
    color: #007bff;
  }
  
  .size-small {
    font-size: 0.875rem;
  }
  
  .size-medium {
    font-size: 1rem;
  }
  
  .size-large {
    font-size: 1.5rem;
  }
</style>

Uso:

<PriceBadge price={50} size="small" />  <!-- In a compact list -->
<PriceBadge price={50} />               <!-- Default medium -->
<PriceBadge price={50} size="large" />  <!-- Hero/featured price -->

Agregar Variantes Visuales

Tal vez quieras diferentes estilos para diferentes contextos:

<script>
  let { 
    price, 
    currency = 'USD',
    locale = 'en-US',
    size = 'medium',
    variant = 'default'  // 'default' | 'highlight' | 'muted' | 'sale'
  } = $props();
  
  let formatted = $derived(
    new Intl.NumberFormat(locale, {
      style: 'currency',
      currency
    }).format(price)
  );
</script>

<span class="price-badge size-{size} variant-{variant}">
  {formatted}
</span>

<style>
  .price-badge {
    font-weight: bold;
  }
  
  /* Size variants */
  .size-small { font-size: 0.875rem; }
  .size-medium { font-size: 1rem; }
  .size-large { font-size: 1.5rem; }
  
  /* Color variants */
  .variant-default {
    color: #007bff;
  }
  
  .variant-highlight {
    color: #28a745;
  }
  
  .variant-muted {
    color: #6c757d;
    font-weight: normal;
  }
  
  .variant-sale {
    color: #dc3545;
  }
</style>

Uso:

<PriceBadge price={50} />                    <!-- Blue default -->
<PriceBadge price={50} variant="highlight" /> <!-- Green for savings -->
<PriceBadge price={50} variant="muted" />    <!-- Gray for original price -->
<PriceBadge price={35} variant="sale" />     <!-- Red for sale price -->

Manejar Casos Límite

¿Qué pasa con precios en cero, negativos o faltantes?

<script>
  let { 
    price,
    currency = 'USD',
    locale = 'en-US',
    size = 'medium',
    variant = 'default',
    freeLabel = 'Free',
    showZero = false
  } = $props();
  
  function formatPrice(amount) {
    return new Intl.NumberFormat(locale, {
      style: 'currency',
      currency
    }).format(amount);
  }
  
  let displayValue = $derived(() => {
    if (price === 0 && !showZero) {
      return freeLabel;
    }
    return formatPrice(price);
  });
</script>

<span class="price-badge size-{size} variant-{variant}">
  {displayValue()}
</span>

Ahora:

<PriceBadge price={0} />
<!-- "Free" -->

<PriceBadge price={0} showZero />
<!-- "$0.00" -->

<PriceBadge price={0} freeLabel="No charge" />
<!-- "No charge" -->

Usar en ServiceCard

Actualiza ServiceCard para usar PriceBadge:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
  import PriceBadge from './PriceBadge.svelte';
  
  let { service, selected = false } = $props();
</script>

<article class="service-card" class:selected>
  <h3>
    <a href="/services/{service.slug}">{service.name}</a>
  </h3>
  <p>{service.description}</p>
  <div class="meta">
    <PriceBadge price={service.price} />
    <span class="duration">{service.duration} min</span>
  </div>
</article>

El ServiceCard ahora es más limpio — el formateo de precios se delega a PriceBadge.

Crear un Componente Duration También

Aprovechando el momento, vamos a crear un DurationBadge:

<!-- filename: src/lib/components/DurationBadge.svelte -->
<script>
  let { 
    minutes,
    size = 'medium',
    showIcon = true
  } = $props();
  
  function formatDuration(mins) {
    if (mins < 60) {
      return `${mins} min`;
    }
    const hours = Math.floor(mins / 60);
    const remainingMins = mins % 60;
    if (remainingMins === 0) {
      return `${hours} hr`;
    }
    return `${hours} hr ${remainingMins} min`;
  }
  
  let formatted = $derived(formatDuration(minutes));
</script>

<span class="duration-badge size-{size}">
  {#if showIcon}🕐{/if}
  {formatted}
</span>

<style>
  .duration-badge {
    color: #666;
  }
  
  .size-small { font-size: 0.875rem; }
  .size-medium { font-size: 1rem; }
  .size-large { font-size: 1.25rem; }
</style>

Uso:

<DurationBadge minutes={60} />   <!-- 🕐 1 hr -->
<DurationBadge minutes={90} />   <!-- 🕐 1 hr 30 min -->
<DurationBadge minutes={45} />   <!-- 🕐 45 min -->

El Poder de los Componentes Pequeños

Los componentes pequeños como PriceBadge y DurationBadge:

Encapsulan la lógica de formateo — Cambia el formato del precio una vez, se actualiza en todos lados
Garantizan consistencia — El mismo estilo en toda la app
Simplifican los componentes padre — Menos código en ServiceCard
Son fáciles de probar — Entrada/salida simple

Errores Comunes

Sobre-Ingeniería

<!-- ❌ Too many props for a simple component -->
<PriceBadge 
  price={50}
  fontFamily="Arial"
  fontSize={16}
  fontWeight={700}
  color="#007bff"
  padding="0.25rem"
  borderRadius="4px"
/>

<!-- ✅ Use variants instead -->
<PriceBadge price={50} variant="highlight" size="large" />

Sin Usar Valores Predeterminados

<!-- ❌ Requiring every prop every time -->
<PriceBadge price={50} currency="USD" locale="en-US" size="medium" variant="default" />

<!-- ✅ Sensible defaults -->
<PriceBadge price={50} />

Resumen

Los componentes utilitarios pequeños como PriceBadge encapsulan el formato y el estilo. Usa valores predeterminados para los casos comunes y props para las variaciones. Estos componentes se componen bien y mantienen los componentes padre limpios.

Puntos clave:

Los componentes pequeños son valiosos
Usa valores predeterminados para los casos comunes
Las variantes manejan diferentes estilos visuales
Encapsula la lógica de formato en los componentes

Próximos Pasos

Los componentes pueden aceptar muchas props. Continúa con Spread Props para aprender cómo reenviar props de forma elegante.