Source

// The landing page's live part: the exchanges this browser organizes and the people it is.
import { useState } from "react";
import { myExchanges, myPeople } from "./lib/mine";

function Go({ to, title, sub }: { to: string; title: string; sub: string }) {
  return (
    <li>
      <a href={to} data-nav>
        <strong>{title}</strong>
        <span>{sub}</span>
      </a>
    </li>
  );
}

export function Yours() {
  const [exchanges] = useState(myExchanges);
  const [people] = useState(myPeople);
  if (!exchanges.length && !people.length) return null;
  return (
    <div className="your">
      {people.length > 0 && (
        <section aria-label="Your Secret Santa pages">
          <h2 className="your-title">Your pages</h2>
          <ul className="your-list">
            {people.slice(0, 6).map((p) => <Go key={p.pid} to={`/x/${p.exchangeId}/p/${p.pid}`} title={p.exchangeName || "Secret Santa"} sub={`You are ${p.name}`} />)}
          </ul>
        </section>
      )}
      {exchanges.length > 0 && (
        <section aria-label="Exchanges you organize">
          <h2 className="your-title">You organize</h2>
          <ul className="your-list">
            {exchanges.slice(0, 6).map((x) => <Go key={x.id} to={`/x/${x.id}/admin`} title={x.name || "Secret Santa"} sub="Organizer view" />)}
          </ul>
        </section>
      )}
      <p className="hint">Listed on this device only.</p>
    </div>
  );
}