gitfor/platform

import { createFileRoute, Link } from "@tanstack/react-router";
import { z } from "zod";
import { listReleases } from "~/fns/releases";
import { ReleaseCard } from "~/components/ReleaseCard";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { buttonClass } from "~/ui/Button";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/$owner/$repo/releases/")({
  validateSearch: z.object({ tag: z.string().optional() }),
  loaderDeps: ({ search }) => search,
  loader: ({ params, deps }) => listReleases({ data: { owner: params.owner, repo: params.repo, tag: deps.tag } }),
  component: ReleasesPage,
});

function ReleasesPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  return (
    <div className="space-y-5">
      <div className="flex items-center gap-3">
        <Heading level={2} size="md">
          Releases
        </Heading>
        <Link to="/$owner/$repo/tags" params={params} className={buttonClass("ghost", "sm")}>
          Tags
        </Link>
        {data.canWrite && (
          <Link to="/$owner/$repo/releases/new" params={params} className={buttonClass("primary", "sm", "ml-auto")}>
            Draft a new release
          </Link>
        )}
      </div>
      {data.releases.length === 0 ? (
        <Panel>
          <EmptyState title="No releases yet" icon="tag">
            Releases bundle a tag, notes and downloadable assets stored in R2.
          </EmptyState>
        </Panel>