panel/app/panel/inspect/page.tsx

"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { API_URL } from "@/lib/constants";
import { useRouter } from "next/navigation";
import { useState } from "react";

export default function Inspect() {
  const [id, setId] = useState("");
  const router = useRouter();

  const createHandler = (type: string) => () =>
    router.push(`/panel/inspect/${type}/${id}`);

  return (
    <div className="flex flex-col gap-2">
      <Input
        placeholder="Enter an ID..."
        value={id}
        onChange={(e) => setId(e.currentTarget.value)}
      />
      <div className="flex gap-2">
        <Button
          className="flex-1"
          variant="outline"
          onClick={createHandler("user")}
        >
          User
        </Button>
        <Button
          className="flex-1"
          variant="outline"
          onClick={createHandler("account")}
        >
          Account
        </Button>
        <Button
          className="flex-1"
          variant="outline"
          onClick={createHandler("server")}
        >
          Server
        </Button>
        <Button
          className="flex-1"
          variant="outline"
          onClick={createHandler("channel")}
        >
          Channel
        </Button>
        <Button
          className="flex-1"
          variant="outline"
          onClick={() =>
            fetch(API_URL + "/invites/" + id)
              .then((res) => res.json())
              .then((invite) =>
                router.push(`/panel/inspect/server/${invite.server_id}`)
              )
          }
        >
          Invite
        </Button>
        <Button
          className="flex-1"
          variant="outline"
          onClick={createHandler("message")}
        >
          Message
        </Button>
      </div>
    </div>
  );
}