Source

// "Your shared resumes": the resumes shared from this device. The list and the admin keys live only in this browser.
import { useEffect, useState, type CSSProperties } from "react";
import { navigate } from "./lib/router";
import { loadMine, type Mine } from "./store";

export function YourResumes() {
  const [list, setList] = useState<Mine[]>(loadMine);
  useEffect(() => {
    const onChange = () => setList(loadMine());
    window.addEventListener("resume:mine", onChange);
    return () => window.removeEventListener("resume:mine", onChange);
  }, []);
  if (!list.length) return null;
  return (
    <section className="section-tight mine">
      <div className="wrap">
        <div className="spread">
          <h2 className="h2">Your shared resumes</h2>
          <span className="hint">Shared from this device. Open one to edit what its link shows.</span>
        </div>
        <ul className="mine-list">
          {list.map((m, i) => (
            <li key={m.id} className="enter" style={{ "--i": i } as CSSProperties}>
              <a href={`/r/${m.id}/admin#k=${m.key}`} onClick={(e) => { e.preventDefault(); navigate(`/r/${m.id}/admin`); }}>
                <span className="mine-main">
                  <strong>{m.name || "Untitled resume"}</strong>
                  {m.label && <span className="muted">{m.label}</span>}
                </span>
                <span className="mine-side muted">{new Date(m.at).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })}</span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}