_Section

Props

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

---
/**
 * Shared shell of every library section: vertical rhythm, container width,
 * light/dark theme, optional centered heading. Sections compose it; content
 * never uses it directly.
 */
export type Theme = 'light' | 'muted' | 'dark';

interface Props {
  id?: string;
  theme?: Theme;
  title?: string;
  description?: string;
  /** pulls the section up over the previous one (hero → cards overlap) */
  overlap?: boolean;
  /** 'sr' hides the heading visually but keeps it for a11y/SEO */
  heading?: 'center' | 'left' | 'sr';
  class?: string;
}

const {
  id,
  theme = 'light',
  title,
  description,
  overlap = false,
  heading = 'center',
  class: extra = '',
} = Astro.props;

const bg = { light: 'bg-white', muted: 'bg-gray-50', dark: 'bg-stone-800' }[theme];
const fg = theme === 'dark' ? 'text-white' : 'text-gray-900';
const sub = theme === 'dark' ? 'text-primary-100' : 'text-gray-500';
const align = heading === 'left' ? '' : 'text-center mx-auto';
---

<section
  id={id}
  class:list={[bg, fg, 'px-4 sm:px-6 lg:px-8', overlap ? 'relative z-10 -mt-32 pb-16' : 'py-16 sm:py-24', extra]}
  aria-labelledby={title && id ? `${id}-title` : undefined}
>
  <div class="mx-auto max-w-7xl">
    {
      title && (
        <div class:list={['max-w-3xl', align, heading === 'sr' ? 'sr-only' : 'mb-12']}>
          <h2 id={id ? `${id}-title` : undefined} class="text-3xl font-extrabold tracking-tight sm:text-4xl">
            {title}
          </h2>
          {description && <p class:list={['mt-4 text-xl', sub]}>{description}</p>}
        </div>
      )
    }
    <slot />
  </div>
</section>