better admin page/list link

src/app/routes/_authed/admin/index.tsx

@@ -1,22 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router"
-import { Title } from "@mantine/core";
+import { AdminPage } from "@/features/admin";
-import Page from "@/components/page";
-import { playerQueries } from "@/features/players/queries";
-import { useQuery } from "@tanstack/react-query";
-import PlayerList from "@/features/players/components/player-list";
 
 export const Route = createFileRoute("/_authed/admin/")({
-  loader: async ({ context }) => {
+  component: () => <AdminPage />,
-    const { queryClient } = context;
-    await queryClient.ensureQueryData(playerQueries.list())
-  },
-  component: RouteComponent,
 })
-
-function RouteComponent() {
-  const { data: players, isLoading } = useQuery(playerQueries.list());
-  return <Page>
-    <Title order={2} mb='md'>Players</Title>
-    <PlayerList players={players!} loading={isLoading} />
-  </Page>
-}

src/components/list-link.tsx

@@ -1,4 +1,4 @@
-import { NavLink, Text } from "@mantine/core";
+import { Divider, NavLink, Text } from "@mantine/core";
 import { CaretRightIcon, Icon } from "@phosphor-icons/react";
 import { Link, useNavigate } from "@tanstack/react-router";
 
@@ -12,15 +12,18 @@ const ListLink = ({ label, to, Icon }: ListLinkProps) => {
   const navigate = useNavigate();
 
   return (
-    <NavLink
+    <>
-      w='100%'
+      <NavLink
-      p='md'
+        w='100%'
-      component={'button'}
+        p='md'
-      onClick={() => navigate({ to })}
+        component={'button'}
-      label={<Text fw={500} size='md'>{label}</Text>}
+        onClick={() => navigate({ to })}
-      leftSection={<Icon weight='bold' size={20} />}
+        label={<Text fw={500} size='md'>{label}</Text>}
-      rightSection={<CaretRightIcon size={20} />}
+        leftSection={<Icon weight='bold' size={20} />}
-    />
+        rightSection={<CaretRightIcon size={20} />}
+      />
+      <Divider />
+    </>
   )
 }
 

src/features/admin/components/admin-page.tsx

@@ -0,0 +1,17 @@
+import { Title, List, Divider } from "@mantine/core";
+import ListLink from "@/components/list-link";
+import Page from "@/components/page";
+import { TrophyIcon } from "@phosphor-icons/react";
+
+const AdminPage = () => {
+  return (
+    <Page noPadding>
+      <Title pl='sm' order={2} mb="md">Admin</Title>
+      <List>
+        <ListLink label="Manage Tournaments" Icon={TrophyIcon} to="/admin/tournaments" />
+      </List>
+    </Page>
+  );
+};
+
+export default AdminPage;

src/features/admin/index.ts

@@ -1,3 +1,7 @@
 import { Logger } from "@/lib/logger";
 
-export const logger = new Logger('Admin');
+export const logger = new Logger('Admin');
+
+export { default as CreateTournament } from './components/create-tournament';
+export { default as EditTournament } from './components/edit-tournament';
+export { default as AdminPage } from './components/admin-page';