Extraindo o Card de Serviço

A página de serviços e o formulário de reserva exibem informações de serviço. Em vez de duplicar essa marcação, vamos criar um componente ServiceCard reutilizável.

O Que Você Aprenderá

Criar um novo arquivo de componente
Mover marcação para um componente
Importar e usar componentes
Organizar arquivos de componentes

O Padrão Repetido

Ambos os lugares exibem serviços de forma semelhante:

<!-- In the services listing -->
{#each services as service}
  <article class="service-card">
    <h3>{service.name}</h3>
    <p>{service.description}</p>
    <p class="price">${service.price}</p>
    <p class="duration">{service.duration} minutes</p>
  </article>
{/each}

<!-- In the booking form -->
{#each services as service}
  <label class="service-card">
    <input type="radio" ... />
    <h3>{service.name}</h3>
    <p>{service.description}</p>
    <span class="price">${service.price}</span>
  </label>
{/each}

Mesma estrutura, contexto ligeiramente diferente. Perfeito para um componente.

Criando o Arquivo de Componente

Crie um novo arquivo na pasta de componentes:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
  // We'll add props here shortly
</script>

<article class="service-card">
  <h3>Service Name</h3>
  <p>Service description goes here.</p>
  <p class="price">$50</p>
  <p class="duration">60 minutes</p>
</article>

<style>
  .service-card {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
  }
  
  .service-card h3 {
    margin: 0 0 0.5rem 0;
  }
  
  .service-card p {
    margin: 0.25rem 0;
    color: #666;
  }
  
  .price {
    font-weight: bold;
    color: #007bff;
  }
  
  .duration {
    font-size: 0.875rem;
  }
</style>

Este é um componente estático — ele ainda não aceita nenhum dado. Isso vem a seguir.

Importando e Usando o Componente

Use o componente na página de serviços:

<!-- filename: src/routes/services/+page.svelte -->
<script>
  import ServiceCard from '$lib/components/ServiceCard.svelte';
</script>

<h1>Our Services</h1>

<div class="services-grid">
  <ServiceCard />
  <ServiceCard />
  <ServiceCard />
</div>

<style>
  .services-grid {
    display: grid;
    gap: 1rem;
  }
</style>

Três cards idênticos aparecem. Todos exibem "Service Name" porque o componente ainda é estático.

O Alias $lib

Observe o caminho de importação: $lib/components/ServiceCard.svelte.

$lib é um alias do SvelteKit que aponta para src/lib/. Ele oferece:

Importações consistentes de qualquer lugar
Sem confusão com caminhos relativos (../../..)
Funciona tanto em componentes quanto em páginas

A pasta src/lib é para código compartilhado: componentes, utilitários, stores.

Organização de Arquivos

Uma estrutura típica de componentes:

src/lib/
├── components/
│   ├── ServiceCard.svelte
│   ├── BookingForm.svelte
│   ├── PriceBadge.svelte
│   └── layout/
│       ├── Header.svelte
│       └── Footer.svelte
├── stores/
│   └── cart.js
└── utils/
    └── formatting.js

Agrupe componentes relacionados em subpastas à medida que o projeto cresce.

Tornando-o Dinâmico

O componente precisa exibir diferentes serviços. Vamos passar dados como props:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
  // Accept service data from parent
  let { service } = $props();
</script>

<article class="service-card">
  <h3>{service.name}</h3>
  <p>{service.description}</p>
  <p class="price">${service.price}</p>
  <p class="duration">{service.duration} minutes</p>
</article>

<style>
  /* Same styles as before */
</style>

Agora passe os dados ao utilizá-lo:

<!-- filename: src/routes/services/+page.svelte -->
<script>
  import ServiceCard from '$lib/components/ServiceCard.svelte';
  
  const services = [
    {
      id: '1',
      slug: 'lawn-mowing',
      name: 'Lawn Mowing',
      description: 'Professional lawn mowing service.',
      price: 50,
      duration: 60
    },
    {
      id: '2',
      slug: 'hedge-trimming',
      name: 'Hedge Trimming',
      description: 'Expert hedge and shrub trimming.',
      price: 75,
      duration: 90
    }
  ];
</script>

<h1>Our Services</h1>

<div class="services-grid">
  {#each services as service (service.id)}
    <ServiceCard {service} />
  {/each}
</div>

O atalho {service} é equivalente a service={service}.

Adicionando um Link para Detalhes

Torne o card clicável:

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

<article class="service-card">
  <h3>
    <a href="/services/{service.slug}">{service.name}</a>
  </h3>
  <p>{service.description}</p>
  <p class="price">${service.price}</p>
  <p class="duration">{service.duration} minutes</p>
</article>

<style>
  .service-card {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    transition: border-color 0.2s;
  }
  
  .service-card:hover {
    border-color: #007bff;
  }
  
  .service-card h3 {
    margin: 0 0 0.5rem 0;
  }
  
  .service-card h3 a {
    color: inherit;
    text-decoration: none;
  }
  
  .service-card h3 a:hover {
    color: #007bff;
  }
  
  .service-card p {
    margin: 0.25rem 0;
    color: #666;
  }
  
  .price {
    font-weight: bold;
    color: #007bff !important;
  }
  
  .duration {
    font-size: 0.875rem;
  }
</style>

Verificando se Funciona

A página de serviços agora deve exibir:

Múltiplos cards de serviço
Cada um com seus próprios dados
Links para páginas de detalhes
Efeitos de hover

Se você editar ServiceCard.svelte, as alterações aparecem em todos os lugares onde ele é usado. Esse é o poder dos componentes.

Erros Comuns

Esquecendo a Importação

<!-- ❌ Component not imported -->
<ServiceCard {service} />

<!-- Error: ServiceCard is not defined -->

Sempre importe os componentes antes de usá-los.

Caminho de Importação Incorreto

<!-- ❌ Relative path (fragile) -->
import ServiceCard from '../../../lib/components/ServiceCard.svelte';

<!-- ✅ Use $lib alias -->
import ServiceCard from '$lib/components/ServiceCard.svelte';

Extensão .svelte Ausente

<!-- ❌ Missing extension -->
import ServiceCard from '$lib/components/ServiceCard';

<!-- ✅ Include .svelte -->
import ServiceCard from '$lib/components/ServiceCard.svelte';

Resumo

Componentes são arquivos .svelte que encapsulam marcação, lógica e estilos. Importe-os com o alias $lib e use-os como elementos HTML. Passe dados com props para torná-los dinâmicos.

Pontos principais:

Crie componentes em src/lib/components/
Importe com $lib/components/NomeDoComponente.svelte
Use let { prop } = $props() para receber dados
Passe dados com <Componente {prop} />

Próximos Passos

O componente recebe dados, mas como exatamente as props funcionam? Continue com Passando Dados de Serviço com $props para uma análise mais aprofundada.