Extrae el Service Card

Tanto la página de servicios como el formulario de reservas muestran información de servicios. En lugar de duplicar ese marcado, vamos a crear un componente ServiceCard reutilizable.

Lo Que Aprenderás

Crear un nuevo archivo de componente
Mover el marcado a un componente
Importar y usar componentes
Organizar archivos de componentes

El Patrón Repetido

Ambos lugares muestran los servicios de manera similar:

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

Misma estructura, contexto ligeramente diferente. Perfecto para un componente.

Crea el Archivo del Componente

Crea un nuevo archivo en la carpeta 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 es un componente estático — aún no acepta datos. Eso viene después.

Importa y Usa el Componente

Usa el componente en la página de servicios:

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

Aparecen tres tarjetas idénticas. Todas muestran "Service Name" porque el componente sigue siendo estático.

El Alias $lib

Observa la ruta de importación: $lib/components/ServiceCard.svelte.

$lib es un alias de SvelteKit que apunta a src/lib/. Proporciona:

Importaciones consistentes desde cualquier lugar
Sin confusión de rutas relativas (../../..)
Funciona tanto en componentes como en páginas

La carpeta src/lib es para código compartido: componentes, utilidades, stores.

Organización de Archivos

Una estructura típica de componentes:

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

Agrupa los componentes relacionados en subcarpetas a medida que el proyecto crece.

Hazlo Dinámico

El componente necesita mostrar diferentes servicios. Pasaremos datos 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>

Ahora pasa los datos al usarlo:

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

La abreviatura {service} es equivalente a service={service}.

Agrega un Enlace a los Detalles

Haz que la tarjeta sea clickeable:

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

Verifica que Funciona

La página de servicios ahora debería mostrar:

Múltiples tarjetas de servicio
Cada una con sus propios datos
Enlaces a páginas de detalle
Efectos al pasar el cursor

Si editas ServiceCard.svelte, los cambios aparecen en todos los lugares donde se usa. Ese es el poder de los componentes.

Errores Comunes

Olvidar la Importación

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

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

Siempre importa los componentes antes de usarlos.

Ruta de Importación Incorrecta

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

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

Falta la Extensión .svelte

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

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

Resumen

Los componentes son archivos .svelte que encapsulan marcado, lógica y estilos. Impórtalos con el alias $lib y úsalos como elementos HTML. Pasa datos con props para hacerlos dinámicos.

Puntos clave:

Crea componentes en src/lib/components/
Importa con $lib/components/NombreComponente.svelte
Usa let { prop } = $props() para recibir datos
Pasa datos con <Component {prop} />

Próximos Pasos

El componente recibe datos, pero ¿cómo funcionan exactamente los props? Continúa con Pasar Datos de Servicio con $props para una mirada más profunda.