Um Componente Simples e Focado

Nem todo componente precisa ser complexo. O PriceBadge é pequeno, mas útil — ele exibe um preço formatado com estilo consistente. Esse padrão aparece em todo o BookIt: nos cards de serviço, no resumo da reserva, no carrinho.

O Que Você Vai Aprender

Criar um componente utilitário focado
Usar valores padrão de props de forma eficaz
Adicionar variantes ao componente com props
Formatar valores dentro de componentes

O PriceBadge Básico

Comece simples — um componente que exibe um preço:

<!-- 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 -->

Adicionar Suporte a Moedas

E se você precisar de moedas diferentes?

<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>

Agora ele lida com a formatação automaticamente:

<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 -->

Adicionar Variantes de Tamanho

Contextos diferentes precisam de tamanhos diferentes:

<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 -->

Adicionar Variantes Visuais

Talvez você queira estilos diferentes para contextos diferentes:

<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 -->

Tratar Casos Extremos

E quanto a preços zero, negativos ou ausentes?

<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>

Agora:

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

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

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

Usar no ServiceCard

Atualize o ServiceCard para usar o 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>

O ServiceCard agora está mais limpo — a formatação de preço é delegada ao PriceBadge.

Criar um Componente Duration Também

Já que estamos nisso, vamos criar um 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 -->

O Poder dos Componentes Pequenos

Componentes pequenos como PriceBadge e DurationBadge:

Encapsulam a lógica de formatação — Mude o formato do preço uma vez, atualiza em todo lugar
Garantem consistência — Mesmo estilo em toda a aplicação
Simplificam os componentes pai — Menos código no ServiceCard
São fáceis de testar — Entrada/saída simples

Erros Comuns

Engenharia Excessiva

<!-- ❌ 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" />

Não Usando Padrões

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

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

Resumo

Componentes utilitários pequenos como PriceBadge encapsulam formatação e estilização. Use padrões para casos comuns e props para variações. Esses componentes se compõem bem e mantêm os componentes pai limpos.

Principais conclusões:

Componentes pequenos são valiosos
Use padrões para casos comuns
Variantes lidam com diferentes estilos visuais
Encapsule a lógica de formatação em componentes

Próximos Passos

Componentes podem aceitar muitas props. Continue com Spread Props para aprender como encaminhar props de forma elegante.