Makking/app/components/County.jsx

import { useState } from "react";

export function County({ county }) {
  const [sort, setSort] = useState({
    field: "rank",
    type: "desc",
  });

  return (
    <li
      className="mx-0 my-4 flex w-full max-w-3xl flex-shrink-0 flex-col space-y-4 overflow-auto 
              rounded border border-ctp-surface0 bg-gradient-to-t from-ctp-crust to-ctp-mantle 
              p-6 shadow-lg shadow-ctp-surface0 sm:mx-4"
      key={county.id}
    >
      <h1 className="text-center text-4xl tracking-tighter text-ctp-subtext0">
        {county.name}
      </h1>
      {county?.players.length > 0 ? (
        <table className="w-full text-left">
          <thead>
            <tr className="border-b border-ctp-surface2 text-ctp-subtext1">
              <th className="p-2">Place</th>
              <th className="p-2">Player</th>
              <th className="p-2">
                <button
                  onClick={() =>
                    setSort({
                      field: "rank",
                      type:
                        sort.field !== "rank"
                          ? "desc"
                          : sort.type === "desc"
                          ? "asc"
                          : "desc",
                    })
                  }
                >
                  Rank{" "}
                  {sort.field === "rank"
                    ? sort.type === "desc"
                      ? "↓"
                      : "↑"
                    : ""}
                </button>
              </th>
              <th className="p-2">
                <button
                  onClick={() =>
                    setSort({
                      field: "score",
                      type:
                        sort.field !== "score"
                          ? "desc"
                          : sort.type === "desc"
                          ? "asc"
                          : "desc",
                    })
                  }
                >
                  Score{" "}
                  {sort.field === "score"
                    ? sort.type === "desc"
                      ? "↓"
                      : "↑"
                    : ""}
                </button>
              </th>
              <th className="p-2">
                <button
                  onClick={() =>
                    setSort({
                      field: "SS",
                      type:
                        sort.field !== "SS"
                          ? "desc"
                          : sort.type === "desc"
                          ? "asc"
                          : "desc",
                    })
                  }
                >
                  SS ranks{" "}
                  {sort.field === "SS"
                    ? sort.type === "desc"
                      ? "↓"
                      : "↑"
                    : ""}
                </button>
              </th>
              <th className="p-2">
                <button
                  onClick={() =>
                    setSort({
                      field: "S",
                      type:
                        sort.field !== "S"
                          ? "desc"
                          : sort.type === "desc"
                          ? "asc"
                          : "desc",
                    })
                  }
                >
                  S ranks{" "}
                  {sort.field === "S" ? (sort.type === "desc" ? "↓" : "↑") : ""}
                </button>
              </th>
              <th className="p-2">
                <button
                  onClick={() =>
                    setSort({
                      field: "A",
                      type:
                        sort.field !== "A"
                          ? "desc"
                          : sort.type === "desc"
                          ? "asc"
                          : "desc",
                    })
                  }
                >
                  A ranks{" "}
                  {sort.field === "A" ? (sort.type === "desc" ? "↓" : "↑") : ""}
                </button>
              </th>
            </tr>
          </thead>
          <tbody>
            {county.players
              .sort((a, b) => {
                if (sort.field === "rank")
                  return sort.type === "desc"
                    ? parseInt(a.rank) - parseInt(b.rank)
                    : parseInt(b.rank) - parseInt(a.rank);
                if (sort.field === "score")
                  return sort.type === "desc"
                    ? a.score - b.score
                    : b.score - a.score;
                if (sort.field === "SS")
                  return sort.type === "desc"
                    ? a.SSranks - b.SSranks
                    : b.SSranks - a.SSranks;
                if (sort.field === "S")
                  return sort.type === "desc"
                    ? a.Sranks - b.Sranks
                    : b.Sranks - a.Sranks;
                if (sort.field === "A")
                  return sort.type === "desc"
                    ? a.Aranks - b.Aranks
                    : b.Aranks - a.Aranks;
              })
              .map((player, index) => (
                <tr
                  key={player.id}
                  className="divide-x-2 divide-ctp-surface0 border border-ctp-surface2 odd:bg-ctp-crust even:bg-ctp-mantle"
                >
                  <td className="whitespace-nowrap p-2 font-bold text-ctp-subtext1">
                    {index + 1}.
                  </td>
                  <td className="whitespace-nowrap p-2 text-ctp-subtext1">
                    <a
                      className="text-ctp-subtext1 hover:text-ctp-text hover:underline"
                      href={`https://osu.ppy.sh/u/${player.playerName}`}
                      referrerPolicy="no-referrer"
                      target="_blank"
                    >
                      {player.playerName}
                    </a>
                  </td>
                  <td className="whitespace-nowrap p-2 text-ctp-subtext1">
                    {player.rank ? `#${player.rank}` : "-"}
                  </td>
                  <td className="whitespace-nowrap p-2 tracking-wide text-ctp-subtext1">
                    {new Intl.NumberFormat().format(player.score)}
                  </td>
                  <td className="whitespace-nowrap p-2 text-ctp-subtext1">
                    {player.SSranks}
                  </td>
                  <td className="whitespace-nowrap p-2 text-ctp-subtext1">
                    {player.Sranks}
                  </td>
                  <td className="whitespace-nowrap p-2 text-ctp-subtext1">
                    {player.Aranks}
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      ) : (
        <p className="text-center">no players here yet :(</p>
      )}
    </li>
  );
}