ProductList

Props

Source apps/www/src/sections/ProductList.astro @ gitt.one

---
/**
 * ProductList — the catalog itself: one <Product> per row, the name, text and
 *   button on the left, the check-marked feature list and the picture on the
 *   right.
 *
 * Use for: a models page, a service catalog where every item deserves a
 *   paragraph and a list.
 * Not for: the compact card teaser (<ProductCards>).
 * Children: <Product> tags, one per row, divided by rules.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  /** anchor of the section */
  id?: string;
  /** short uppercase line above the title */
  kicker?: string;
  /** the section heading */
  title?: string;
  /** a paragraph under the heading */
  description?: string;
  /** background of the section */
  theme?: Theme;
}
const { id, kicker, title, description, theme = 'light' } = Astro.props;
---

<Section id={id} theme={theme}>
  {(kicker || title || description) && (
    <div class="mx-auto max-w-4xl text-center">
      {kicker && <p class="text-base font-semibold uppercase tracking-wider text-primary-600">{kicker}</p>}
      {title && <h2 class="mt-2 text-3xl font-extrabold sm:text-4xl">{title}</h2>}
      {description && <p class="mt-3 text-xl text-gray-500">{description}</p>}
    </div>
  )}
  <div class="mt-4 divide-y divide-gray-200" data-variant="list">
    <slot />
  </div>
</Section>