FeatureList

Props

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

---
/**
 * FeatureList — <Feature> items without cards: the icon and the text on the
 * section's own background. For dense benefit lists, where a card around
 * every line would be noise.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
import Button from './_Button.astro';

interface Props {
  id?: string;
  kicker?: string;
  title?: string;
  description?: string;
  columns?: 1 | 2 | 3 | 4;
  theme?: Theme;
  decor?: 'none' | 'dots' | 'dots-left';
  heading?: 'center' | 'left';
  icons?: 'brand' | 'soft';
  linkText?: string;
  href?: string;
  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>