135 lines · 4.2 KB
import { Link, useNavigate } from "@tanstack/react-router";
import { IssueList } from "./IssueList";
import { Panel } from "~/ui/Panel";
import { buttonClass } from "~/ui/Button";
import { inputClass } from "~/ui/Field";
import { cn } from "~/utils/cn";
import type { listIssues } from "~/fns/issues";
import { useEmailUnverified } from "~/hooks/use-viewer";
import { VerifyEmailHint } from "./VerifyEmailHint";

type Data = Awaited<ReturnType<typeof listIssues>>;
type Search = { state?: "open" | "closed" | "all"; q?: string; label?: string; page?: number };

export function IssueListPage({
  owner,
  repo,
  data,
  search,
  kind,
}: {
  owner: string;
  repo: string;
  data: Data;
  search: Search;
  kind: "issue" | "pull";
}) {
  const navigate = useNavigate();
  const unverified = useEmailUnverified();
  const to = kind === "pull" ? "/$owner/$repo/pulls" : "/$owner/$repo/issues";
  const state = search.state ?? "open";
  const page = search.page ?? 1;
  const filters = [
    { id: "open", label: `${data.openCount} Open` },
    { id: "closed", label: `${data.closedCount} Closed` },
  ] as const;

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-3">
        <form