FeatureList

Props

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

---
/**
 * FeatureList — the <Feature> items without cards: the icon and the text
 *   straight on the section's background.
 *
 * Use for: many short points — six, eight, twelve — where a card around every
 *   line would be noise: a feature matrix, "what you get", a capabilities
 *   list.
 * Not for: three to six items that deserve a card each (<FeatureCards>).
 * Children: <Feature> tags only.
 * Layout: `columns` 1–4 (default 3); `heading="left"` or a `kicker` moves the
 *   heading out of the centre.
 * Link: `linkText` + `href` add one centered button under the list.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
import Button from './_Button.astro';

interface Props {
  /** anchor of the section */
  id?: string;
  /** short uppercase line above the title */
  kicker?: string;
  /** the section heading */
  title?: string;
  /** one or two sentences under the heading */
  description?: string;
  /** items per row on desktop */
  columns?: 1 | 2 | 3 | 4;
  /** background of the section */
  theme?: Theme;
  /** decorative dot grid behind the content */
  decor?: 'none' | 'dots' | 'dots-left';
  /** where the heading sits */
  heading?: 'center' | 'left';
  /** "brand" gradient squares behind the icons, "soft" a pale tint */
  icons?: 'brand' | 'soft';
  /** text of one centered button under the list; shown only with href */
  linkText?: string;
  /** link of that button */
  href?: string;
  /** escape hatch for compositions: extra classes for the section shell */
  class?: string;
}
const { id, kicker, title, description, columns = 3, theme = 'light', decor = 'none', heading = 'center', icons = 'brand', linkText, href, class: extra = '' } = Astro.props;
const cols = { 1: '', 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-2 lg:grid-cols-3', 4: 'sm:grid-cols-2 lg:grid-cols-4' }[columns];
const ownHeader = Boolean(title) && (Boolean(kicker) || heading === 'left');
---

<Section id={id} title={ownHeader ? undefined : title} description={ownHeader ? undefined : description} theme={theme} heading={title && !ownHeader ? heading : 'sr'} class={extra} decor={decor}>
  {ownHeader && (
    <div class:list={['mb-12 max-w-3xl', heading === 'center' && 'mx-auto text-center']}>
      {kicker && <p class="text-sm font-semibold uppercase tracking-wide"><span class="bg-gradient-to-r from-primary-500 to-primary-alt-600 bg-clip-text text-transparent [.bg-gradient-to-r_&]:from-primary-100 [.bg-gradient-to-r_&]:to-primary-alt-400">{kicker}</span></p>}
      <h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">{title}</h2>
      {description && <p class="mt-4 text-lg text-gray-500 [.bg-stone-800_&]:text-primary-100 [.bg-gradient-to-r_&]:text-primary-100">{description}</p>}
    </div>
  )}
  <ul
    class:list={['grid list-none grid-cols-1 gap-8', cols]}
    data-variant="plain"
    data-on-dark={theme === 'brand' || theme === 'dark' ? '' : undefined}
    data-icons={icons}
  >
    <slot />
  </ul>
  {linkText && href && <p class="mt-10 text-center"><Button href={href}>{linkText}</Button></p>}
</Section>