FeatureAsidepopular

Props

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

---
/**
 * FeatureAside — the heading, a paragraph and an optional picture on the left;
 *   a dense icon-and-text list of <Feature> on the right.
 *
 * Use for: one subject explained in several points — "how we work", "what is
 *   included", "why it matters" — where the points support the heading rather
 *   than compete with it.
 * Not for: parallel offers of equal weight (<FeatureCards>); a numbered
 *   sequence (<Steps>).
 * Children: <Feature> tags, three to six. The icon of each sits to the left of
 *   its text.
 * Picture: `image` is placed under the heading text on the left; any
 *   proportions, shown whole.
 * Link: `linkText` + `href` add one centered button under the block.
 */
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';
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, left column */
  title?: string;
  /** a paragraph under the heading, left column */
  description?: string;
  /** background of the section */
  theme?: Theme;
  /** decorative dot grid behind the content */
  decor?: 'none' | 'dots' | 'dots-left';
  /** file name in images/, shown under the heading text */
  image?: string;
  /** text of one centered button under the block; 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, theme = 'light', decor = 'none', image, linkText, href, class: extra = '' } = Astro.props;
const img = image ? await resolveImage(image) : undefined;
---

<Section id={id} theme={theme} heading="sr" class={extra} decor={decor}>
  <div class="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-16">
    <div>
      {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>}
      {title && <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>}
      {img && <Image src={img} alt="" widths={[400, 840]} class="mt-8 w-full rounded-lg shadow-lg" />}
    </div>
    <ul
      class="mt-10 grid list-none grid-cols-1 gap-y-8 lg:mt-0"
      data-variant="plain"
      data-aside=""
      data-on-dark={theme === 'brand' || theme === 'dark' ? '' : undefined}
    >
      <slot />
    </ul>
  </div>
  {linkText && href && <p class="mt-10 text-center"><Button href={href}>{linkText}</Button></p>}
</Section>