import { issueStateTone } from "~/ui/tones";
import { createFileRoute, Link } from "@tanstack/react-router";
import { z } from "zod";
import { exploreRepos } from "~/fns/repos";
import { searchIssues } from "~/fns/account";
import { searchCode } from "~/fns/code";
import { CodeSearchResults } from "~/components/CodeSearchResults";
import { RepoList } from "~/components/RepoList";
import { SearchForm } from "~/components/SearchForm";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { Heading } from "~/ui/Heading";
import { buttonClass } from "~/ui/Button";
export const Route = createFileRoute("/search")({
validateSearch: z.object({ q: z.string().optional() }),
loaderDeps: ({ search }) => ({ q: search.q?.trim() ?? "" }),
loader: async ({ deps }) => {
if (!deps.q) return { q: "", repos: [], issues: [], code: [] };
const [repos, issues, code] = await Promise.all([
exploreRepos({ data: { q: deps.q, page: 1 } }),
searchIssues({ data: { q: deps.q } }),
searchCode({ data: { q: deps.q } }),
]);
return { q: deps.q, repos: repos.repos, issues, code: code.hits };
},
component: SearchPage,
});
function SearchStart() {
return (
<PageContainer className="flex flex-col items-center py-20 text-center md:py-28">
<h1 className="text-3xl font-semibold tracking-tight text-white">Search gitfor</h1>
<p className="mt-2 max-w-xl text-gray-400">
Repositories match by name, issues and pull requests by title, and code by file contents. Results only include
what you have access to.
</p>
<SearchForm size="lg" autoFocus className="mt-8 w-full max-w-xl" />