Componentes

• Un componente puede ser un único elemento HTML como un botón, o una estructura más compleja, como un Layout o un Card personalizado

1. Crear

• Para recibir valores se hace desestructurando Astro.props
• Para utilizar los valores recibidos ya sea dentro de las etiquetas HTML o como propiedades se hace con llaves

---
interface Props {
  title: string;
  body: string;
  href: string;
}

const { href, title, body } = Astro.props;
const datos = await fetch('API_URL_SECRETA/users').then(r => r.json());
---

<li class="link-card">
  <a href={href}>
    <h2>{title}<span>&rarr;</span></h2>
    <p>{body}</p>
  </a>
</li>

Slots

• Así funcionan los layouts
• Si queremos recibir etiquetas HTML u otro valor, podemos utilizar <slots/>
• Es posible tener más de un slot, y para diferenciarlos se escribe el atributo name=""
• Si no siempre es necesario recibir valores en un slot, podemos agregarle contenido por defecto

<a class="">
  <slot name="before" />
  <slot> Contenido (HTML, Componente, etc.) por defecto</slot>
  <slot name="after" />
</a>

2. Usar

<ul role="list" class="link-card-grid">
  <Card
    href="https://aaaaaaaa.com"
    title="Documentation"
    body="Visitar otra pagina"
  />
  <Card
    href="blog/primer-post"
    title="Primer Post"
    body="Visita el primer post"
  />
</ul>

Slots

• Para posicionar o utilizar un slot, se utiliza el atributo name="" con el valor especificado en la definición del componente
• Si no se le pasa información a un slot, este puede o no tener contenido por defecto

<HeaderButton class="text-white" href="/">
  <svg
    slot="nombre-slot"
  </svg>
  Contenido slot sin nombrar
  <p slot="otro">Otro slot</p>
</HeaderButton>

• Nota fuera del tema. Si son iconos SVG, algunos atributos no son necesarios, como class y xmlns