improved styling a bit and fixed referrerpolicy

app/components/County.jsx

@@ -1,7 +1,10 @@
 import { useState } from "react";
 
 export function County({ county }) {
-  const [sort, setSort] = useState("desc");
+  const [sort, setSort] = useState({
+    field: "rank",
+    type: "desc",
+  });
 
   return (
     <li
@@ -17,12 +20,48 @@ export function County({ county }) {
         <table className="text-left">
           <thead>
             <tr className="border-b border-ctp-surface2 text-ctp-subtext1">
-              <th className="p-2">Player</th>
               <th className="p-2">
                 <button
-                  onClick={() => setSort(sort === "desc" ? "asc" : "desc")}
+                  onClick={() =>
+                    setSort({
+                      field: "player",
+                      type:
+                        sort.field !== "player"
+                          ? "desc"
+                          : sort.type === "desc"
+                          ? "asc"
+                          : "desc",
+                    })
+                  }
                 >
-                  Rank {sort === "desc" ? "↓" : "↑"}
+                  Player{" "}
+                  {sort.field === "player"
+                    ? sort.type === "desc"
+                      ? "↓"
+                      : "↑"
+                    : ""}
+                </button>
+              </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>
             </tr>
@@ -30,15 +69,46 @@ export function County({ county }) {
           <tbody>
             {county.players
               .sort((a, b) => {
-                return sort === "desc" ? a.rank - b.rank : b.rank - a.rank;
+                if (sort.field === "rank")
+                  return sort.type === "desc"
+                    ? a.rank - b.rank
+                    : b.rank - a.rank;
+                if (sort.field === "player") {
+                  if (sort.type === "desc") {
+                    if (a.playerName < b.playerName) {
+                      return -1;
+                    }
+                    if (b.playerName < a.playerName) {
+                      return 1;
+                    }
+                    return 0;
+                  } else {
+                    if (a.playerName > b.playerName) {
+                      return -1;
+                    }
+                    if (b.playerName > a.playerName) {
+                      return 1;
+                    }
+                    return 0;
+                  }
+                }
               })
               .map((player) => (
                 <tr
                   key={player.id}
                   className="border-b border-ctp-surface2 odd:bg-ctp-surface0 even:bg-ctp-surface1"
                 >
-                  <td className="p-2">{player.playerName}</td>
-                  <td className="p-2">#{player.rank}</td>
+                  <td className="p-2">
+                    <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="p-2 text-ctp-subtext1">#{player.rank}</td>
                 </tr>
               ))}
           </tbody>

app/routes/index.jsx

@@ -120,7 +120,7 @@ export default function Index() {
         ) : (
           <a
             href="https://osu.ppy.sh/oauth/authorize?client_id=20031&redirect_uri=http://localhost:3000/auth&response_type=code"
-            referrerPolicy="noreferrer"
+            referrerPolicy="no-referrer"
             className="rounded-full border border-ctp-surface0 bg-ctp-surface0 px-4 py-2 shadow-md 
             shadow-ctp-overlay0 hover:bg-ctp-surface1 hover:shadow-ctp-overlay2"
           >