Pages.jsx

1export function Pages({ groups }) {2  return (3    <div className="wrap text">4      <div className="page-head">5        <h1>Pages</h1>6        <p className="lead">Every route this site serves.</p>7      </div>8      {groups.map((group) => (9        <section key={group.name} className="routes-group" aria-labelledby={`routes-${group.name}`}>10          <h2 id={`routes-${group.name}`}>{group.name}</h2>11          <ul className="routes">12            {group.rows.map((row) => (13              <li key={row.href}>14                <span className="who">15                  <a href={row.href}>{row.name}</a>16                  <code>{row.href}</code>17                </span>18                <p>{row.note}</p>19              </li>20            ))}21          </ul>22        </section>23      ))}24    </div>25  );26}