Source

// The landing page's live part: "Your pages" for returning owners.
import { useState } from "react";
import { navigate } from "./lib/router";
import { myPages } from "./lib/pages";

export function YourPages() {
  const [pages] = useState(myPages);
  const [all, setAll] = useState(false);
  if (!pages.length) return null;
  const shown = all ? pages : pages.slice(0, 4);
  return (
    <section className="your-pages" aria-label="Your pages">
      <h2 className="your-title">Your pages</h2>
      <ul className="your-list">
        {shown.map((p) => (
          <li key={p.handle}>
            <a href={`/e/${p.handle}`} onClick={(e) => { e.preventDefault(); navigate(`/e/${p.handle}`); }}>
              <strong>{p.title || p.handle}</strong>
              <span>/{p.handle}</span>
            </a>
          </li>
        ))}
      </ul>
      {pages.length > shown.length && <button className="link-btn" type="button" onClick={() => setAll(true)}>Show all {pages.length}</button>}
      <p className="hint">Listed on this device only.</p>
    </section>
  );
}