Function Home

web/src/components/Home.tsx:41–428

()

}

export default function Home() {
  const [search, setSearch] = useState("");
  const [cat, setCat] = useState("all");
  const [bm, setBm] = useState<string[]>([]);
  const [sort, setSort] = useState<Sort>("default");
  const [open, setOpen] = useState<Project | null>(null);
  const [showBmOnly, setShowBmOnly] = useState(false);

  // Bookmarks load client-side only — keeps SSR/hydration consistent.
  useEffect(() => setBm(getBookmarks()), []);

  const toggleBm = (id: string) => setBm(toggleBookmark(id));

  const filtered = useMemo(() => {
    let arr = PROJECTS.filter((p) => {
      if (showBmOnly && !bm.includes(p.id)) return false;
      if (cat !== "all" && p.cat !== cat) return false;
      if (search) {
        const q = search.toLowerCase();
        return (
          p.name.toLowerCase().includes(q) ||
          p.blurb.toLowerCase().includes(q) ||
          p.deps.toLowerCase().includes(q)
        );
      }
      return true;
    });
    if (sort === "alpha") arr = [...arr].sort((a, b) => a.name.localeCompare(b.name));
    if (sort === "short") arr = [...arr].sort((a, b) => a.lines - b.lines);
    if (sort === "bookmarks")
      arr = [...arr].sort(
        (a, b) => (bm.includes(b.id) ? 1 : 0) - (bm.includes(a.id) ? 1 : 0),
      );
    return arr;
  }, [search, cat, bm, sort, showBmOnly]);

  return (
    <div>
      <div className="s-shell">
        {/* NAV */}
        <nav className="s-nav">
          <Link className="s-logo" href="/">
            <div className="s-logomark">
              <StickerLogo />
            </div>
            <div>
              <div className="s-brand-name">pyBegin</div>
              <div className="s-brand-sub">250+ projects · 1 weekend each</div>
            </div>
          </Link>
          <div className="s-navlinks">
            <button className="active">Home</button>
            <button onClick={() => scrollTo("gallery")}>Projects</button>
            <button onClick={() => scrollTo("paths")}>Learn</button>
            <Link href="/playground">Playground</Link>
            <button onClick={() => scrollTo("crew")}>Contribute</button>
          </div>
          <div className="s-nav-right">