Index Rows

import {
  IndexRow,
  IndexRowCount,
  IndexRowDek,
  IndexRowMeta,
  IndexRows,
  IndexRowsFooter,
  IndexRowsHeader,
  IndexRowsList,
  IndexRowTitle,
  IndexRowTitleLink,
} from '@fairgarden-private/design/components/IndexRows'
import { Link } from '@fairgarden-private/design/components/Link'
import { thumb } from './thumb'
import styles from './kinds.module.css'

const topics = [
  { label: 'Birding', count: 29 },
  { label: 'Trail work', count: 21 },
  { label: 'Native plants', count: 17 },
]

/** Ranked (with counts), related (with thumbnails) and article rows. */
export function IndexRowsKinds() {
  return (
    <div className={styles.stack}>
      <IndexRows kind="ranked">
        <IndexRowsHeader>
          <h2 className={styles.heading}>Most read topics</h2>
        </IndexRowsHeader>
        <IndexRowsList>
          {topics.map((topic, index) => (
            <IndexRow key={topic.label} rank={index + 1}>
              <IndexRowTitle>
                <IndexRowTitleLink href="#kinds" aria-current={index === 1 ? 'page' : undefined}>
                  {topic.label}
                </IndexRowTitleLink>
                <IndexRowCount>({topic.count})</IndexRowCount>
              </IndexRowTitle>
            </IndexRow>
          ))}
        </IndexRowsList>
        <IndexRowsFooter>
          <Link kind="standalone" href="#kinds">
            See all topics
          </Link>
        </IndexRowsFooter>
      </IndexRows>

      <IndexRows kind="related">
        <IndexRowsHeader>
          <h2 className={styles.heading}>Related</h2>
        </IndexRowsHeader>
        <IndexRowsList>
          {['How owls hear', 'Nest boxes that work'].map((title) => (
            <IndexRow key={title} thumb={<img src={thumb} alt="" />}>
              <IndexRowTitle>
                <IndexRowTitleLink href="#kinds">{title}</IndexRowTitleLink>
              </IndexRowTitle>
            </IndexRow>
          ))}
        </IndexRowsList>
      </IndexRows>

      <IndexRows kind="article">
        <IndexRowsList>
          <IndexRow>
            <IndexRowTitle>
              <IndexRowTitleLink href="#kinds" index>
                The long return of the river otter
              </IndexRowTitleLink>
            </IndexRowTitle>
            <IndexRowMeta>Field notes · 12 Sep 2026</IndexRowMeta>
            <IndexRowDek>Twenty years after the last sighting, tracks on the sandbar.</IndexRowDek>
          </IndexRow>
          <IndexRow>
            <IndexRowTitle>
              <IndexRowTitleLink href="#kinds" index>
                Why we leave the dead trees standing
              </IndexRowTitleLink>
            </IndexRowTitle>
            <IndexRowMeta>Stewardship · 3 Sep 2026</IndexRowMeta>
          </IndexRow>
        </IndexRowsList>
      </IndexRows>
    </div>
  )
}

import { Button } from '@fairgarden-private/design/components/Button'
import {
  IndexRow,
  IndexRowDisclosure,
  IndexRows,
  IndexRowsList,
} from '@fairgarden-private/design/components/IndexRows'
import styles from './event.module.css'

const events = [
  { date: '2026-10-03', key: '03 / 10', title: 'Night walk at Hemlock Ravine', meta: 'In person · 7 p.m.' },
  { date: '2026-10-11', key: '11 / 10', title: 'Seed swap', meta: 'In person · 10 a.m.' },
  { date: '2026-09-12', key: '12 / 09', title: 'Stream ecology talk', meta: 'Virtual · Past' },
]

/** Event rows expand in place; collapsed titles are muted, open titles grow and darken. */
export function IndexRowsEvent() {
  return (
    <IndexRows kind="event">
      <IndexRowsList>
        {events.map((event) => (
          <IndexRow key={event.title} date={<time dateTime={event.date}>{event.key}</time>}>
            <IndexRowDisclosure title={event.title} meta={event.meta}>
              <p>Meet at the north kiosk. Bring a red light; we walk slowly and quietly.</p>
              <dl className={styles.pairs}>
                <dt>Host</dt>
                <dd>Ana Díaz</dd>
                <dt>Entrance</dt>
                <dd>North lot</dd>
              </dl>
              <Button size="sm">Register</Button>
            </IndexRowDisclosure>
          </IndexRow>
        ))}
      </IndexRowsList>
    </IndexRows>
  )
}