Source

// "Which device is this?": the first choice, in the landing hero and on the installed app's home.
import { navigate, usePath } from "./lib/router";
import { baby, pairings } from "./lib/store";
import { Icon } from "./ui";

export function Launcher() {
  usePath(); // re-read what this device remembers after moving between screens
  const station = baby.get();
  const watched = pairings.list();
  const go = (to: string) => (e: React.MouseEvent) => { e.preventDefault(); navigate(to); };
  return (
    <div className="launcher">
      {watched.length > 0 && (
        <div className="again">
          <p className="launcher-label">Watch again</p>
          <ul className="again-list">
            {watched.map((p) => (
              <li key={p.key}>
                <a className="again-item" href={`/watch/${p.key}`} onClick={go(`/watch/${p.key}`)}>
                  <span className="again-name">{p.name}</span>
                  <span className="again-go">Watch</span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      )}
      <p className="launcher-label">{watched.length ? "Or set up a device" : "Which device is this?"}</p>
      <a className="choice" href="/baby" onClick={go("/baby")}>
        <span className="choice-icon"><Icon name="crib" size={26} /></span>
        <span className="choice-text">
          <strong>{station ? `Baby station: ${station.name}` : "Baby station"}</strong>
          <small>{station ? "Open it again on this device." : "The phone by the crib. It sends video and sound."}</small>
        </span>
      </a>
      <a className="choice" href="/parent" onClick={go("/parent")}>
        <span className="choice-icon"><Icon name="eye" size={26} /></span>
        <span className="choice-text">
          <strong>Parent</strong>
          <small>Watch and listen from this phone or laptop.</small>
        </span>
      </a>
      <p className="launcher-note">Free. No account. Video goes from phone to phone and is never recorded.</p>
    </div>
  );
}