gitfor/platform

import { Link } from "@tanstack/react-router";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { LabelChip } from "~/ui/LabelChip";
import { RelativeTime } from "~/ui/RelativeTime";
import { cn } from "~/utils/cn";

type Item = {
  number: number;
  title: string;
  state: "open" | "closed";
  author: { name: string };
  commentsCount: number;
  createdAt: number;
  labels: Array<{ id: string; name: string; color: string }>;
  draft: boolean;
  merged: boolean;
};

function StateIcon({ item, kind }: { item: Item; kind: "issue" | "pull" }) {
  const tone = item.merged
    ? "text-merged-400"
    : item.state === "open"
      ? item.draft
        ? "text-kumo-subtle"
        : "text-kumo-success"
      : kind === "pull"
        ? "text-kumo-danger"
        : "text-kumo-subtle";
  const glyph = kind === "pull" ? (item.merged ? "⇢" : "⇄") : item.state === "open" ? "◉" : "✓";
  return (
    <span aria-hidden className={cn("w-4 text-center font-mono", tone)}>
      {glyph}
    </span>
  );
}

export function IssueList({
  owner,
  repo,