gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { z } from "zod";
import { submitAbuseReport } from "~/fns/abuse";
import { useAction } from "~/hooks/use-action";
import { ABUSE_CATEGORIES, ABUSE_CATEGORY_LABELS, ABUSE_EMAIL } from "~/lib/abuse";
import type { AbuseCategory } from "~/lib/abuse";
import { Button } from "~/ui/Button";
import { Callout, ErrorBanner } from "~/ui/Callout";
import { SelectField, TextAreaField, TextField } from "~/ui/Field";
import { Heading } from "~/ui/Heading";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { ExternalLink } from "~/ui/TextLink";
import { seo } from "~/utils/seo";

export const Route = createFileRoute("/abuse")({
  validateSearch: z.object({ url: z.string().max(2000).optional() }),
  head: ({ match }) => ({
    meta: seo({
      origin: match.context.publicUrl,
      path: "/abuse",
      title: "Report abuse · gitfor",
      description: "Report phishing, malware, spam or other abuse on gitfor repositories and hosted sites.",
    }),
  }),
  component: AbusePage,
});

const CATEGORY_OPTIONS = ABUSE_CATEGORIES.map((value) => ({ value, label: ABUSE_CATEGORY_LABELS[value] }));

function field(form: FormData, name: string): string {
  return String(form.get(name) ?? "");
}

function AbusePage() {
  const { url } = Route.useSearch();
  const report = useAction(submitAbuseReport, { invalidate: false });
  const [sent, setSent] = useState(false);