diff --git a/src/app/routeTree.gen.ts b/src/app/routeTree.gen.ts index 2cf690e..c689437 100644 --- a/src/app/routeTree.gen.ts +++ b/src/app/routeTree.gen.ts @@ -23,6 +23,7 @@ import { Route as AuthedTournamentsTournamentIdRouteImport } from './routes/_aut import { Route as AuthedTeamsTeamIdRouteImport } from './routes/_authed/teams.$teamId' import { Route as AuthedProfilePlayerIdRouteImport } from './routes/_authed/profile.$playerId' import { Route as AuthedAdminPreviewRouteImport } from './routes/_authed/admin/preview' +import { Route as AuthedAdminTournamentsIndexRouteImport } from './routes/_authed/admin/tournaments/index' import { Route as AuthedAdminTournamentsIdRouteImport } from './routes/_authed/admin/tournaments/$id' import { ServerRoute as ApiTestServerRouteImport } from './routes/api/test' import { ServerRoute as ApiTournamentsUploadLogoServerRouteImport } from './routes/api/tournaments/upload-logo' @@ -92,6 +93,12 @@ const AuthedAdminPreviewRoute = AuthedAdminPreviewRouteImport.update({ path: '/preview', getParentRoute: () => AuthedAdminRoute, } as any) +const AuthedAdminTournamentsIndexRoute = + AuthedAdminTournamentsIndexRouteImport.update({ + id: '/tournaments/', + path: '/tournaments/', + getParentRoute: () => AuthedAdminRoute, + } as any) const AuthedAdminTournamentsIdRoute = AuthedAdminTournamentsIdRouteImport.update({ id: '/tournaments/$id', @@ -139,6 +146,7 @@ export interface FileRoutesByFullPath { '/admin/': typeof AuthedAdminIndexRoute '/tournaments': typeof AuthedTournamentsIndexRoute '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute + '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute } export interface FileRoutesByTo { '/login': typeof LoginRoute @@ -152,6 +160,7 @@ export interface FileRoutesByTo { '/admin': typeof AuthedAdminIndexRoute '/tournaments': typeof AuthedTournamentsIndexRoute '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute + '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute } export interface FileRoutesById { __root__: typeof rootRouteImport @@ -168,6 +177,7 @@ export interface FileRoutesById { '/_authed/admin/': typeof AuthedAdminIndexRoute '/_authed/tournaments/': typeof AuthedTournamentsIndexRoute '/_authed/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute + '/_authed/admin/tournaments/': typeof AuthedAdminTournamentsIndexRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath @@ -184,6 +194,7 @@ export interface FileRouteTypes { | '/admin/' | '/tournaments' | '/admin/tournaments/$id' + | '/admin/tournaments' fileRoutesByTo: FileRoutesByTo to: | '/login' @@ -197,6 +208,7 @@ export interface FileRouteTypes { | '/admin' | '/tournaments' | '/admin/tournaments/$id' + | '/admin/tournaments' id: | '__root__' | '/_authed' @@ -212,6 +224,7 @@ export interface FileRouteTypes { | '/_authed/admin/' | '/_authed/tournaments/' | '/_authed/admin/tournaments/$id' + | '/_authed/admin/tournaments/' fileRoutesById: FileRoutesById } export interface RootRouteChildren { @@ -359,6 +372,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof AuthedAdminPreviewRouteImport parentRoute: typeof AuthedAdminRoute } + '/_authed/admin/tournaments/': { + id: '/_authed/admin/tournaments/' + path: '/tournaments' + fullPath: '/admin/tournaments' + preLoaderRoute: typeof AuthedAdminTournamentsIndexRouteImport + parentRoute: typeof AuthedAdminRoute + } '/_authed/admin/tournaments/$id': { id: '/_authed/admin/tournaments/$id' path: '/tournaments/$id' @@ -412,12 +432,14 @@ interface AuthedAdminRouteChildren { AuthedAdminPreviewRoute: typeof AuthedAdminPreviewRoute AuthedAdminIndexRoute: typeof AuthedAdminIndexRoute AuthedAdminTournamentsIdRoute: typeof AuthedAdminTournamentsIdRoute + AuthedAdminTournamentsIndexRoute: typeof AuthedAdminTournamentsIndexRoute } const AuthedAdminRouteChildren: AuthedAdminRouteChildren = { AuthedAdminPreviewRoute: AuthedAdminPreviewRoute, AuthedAdminIndexRoute: AuthedAdminIndexRoute, AuthedAdminTournamentsIdRoute: AuthedAdminTournamentsIdRoute, + AuthedAdminTournamentsIndexRoute: AuthedAdminTournamentsIndexRoute, } const AuthedAdminRouteWithChildren = AuthedAdminRoute._addFileChildren( diff --git a/src/app/routes/_authed/admin/tournaments/index.tsx b/src/app/routes/_authed/admin/tournaments/index.tsx new file mode 100644 index 0000000..92a928a --- /dev/null +++ b/src/app/routes/_authed/admin/tournaments/index.tsx @@ -0,0 +1,27 @@ +import Page from "@/components/page"; +import ManageTournaments from "@/features/admin/components/manage-tournaments"; +import { tournamentQueries } from "@/features/tournaments/queries"; +import { createFileRoute } from "@tanstack/react-router"; + +export const Route = createFileRoute("/_authed/admin/tournaments/")({ + beforeLoad: async ({ context }) => { + const { queryClient } = context; + await queryClient.ensureQueryData(tournamentQueries.list()); + }, + loader: () => ({ + header: { + withBackButton: true, + title: "Manage Tournaments", + }, + refresh: { + toRefresh: tournamentQueries.list().queryKey, + }, + }), + component: RouteComponent, +}); + +function RouteComponent() { + return + + +} diff --git a/src/components/list-button.tsx b/src/components/list-button.tsx new file mode 100644 index 0000000..91278c6 --- /dev/null +++ b/src/components/list-button.tsx @@ -0,0 +1,30 @@ +import { Divider, Group, Text, UnstyledButton } from "@mantine/core"; +import { CaretRightIcon, Icon } from "@phosphor-icons/react"; + +interface ListButtonProps { + label: string; + Icon: Icon; + handleClick: () => void; +} + +const ListButton = ({ label, handleClick, Icon }: ListButtonProps) => { + return ( + <> + + + + {label} + + + + + + ) +} + +export default ListButton; diff --git a/src/components/sheet/slide-panel/slide-panel-field.tsx b/src/components/sheet/slide-panel/slide-panel-field.tsx index 23bcc6b..f111f41 100644 --- a/src/components/sheet/slide-panel/slide-panel-field.tsx +++ b/src/components/sheet/slide-panel/slide-panel-field.tsx @@ -68,7 +68,7 @@ const SlidePanelField = ({ style={{ width: '100%', border: error ? '1px solid var(--mantine-color-error)' : '1px solid var(--mantine-color-dimmed)', - borderRadius: 'var(--mantine-radius-lg)', + borderRadius: 'var(--mantine-radius-md)', backgroundColor: 'var(--mantine-color-body)', textAlign: 'left', }} diff --git a/src/features/admin/components/admin-page.tsx b/src/features/admin/components/admin-page.tsx index 217dc62..b7d2897 100644 --- a/src/features/admin/components/admin-page.tsx +++ b/src/features/admin/components/admin-page.tsx @@ -1,7 +1,8 @@ import { Title, List, Divider } from "@mantine/core"; import ListLink from "@/components/list-link"; import Page from "@/components/page"; -import { TrophyIcon } from "@phosphor-icons/react"; +import { TrophyIcon, UsersFourIcon, UsersThreeIcon } from "@phosphor-icons/react"; +import ListButton from "@/components/list-button"; const AdminPage = () => { return ( diff --git a/src/features/admin/components/manage-tournaments.tsx b/src/features/admin/components/manage-tournaments.tsx new file mode 100644 index 0000000..cc46a85 --- /dev/null +++ b/src/features/admin/components/manage-tournaments.tsx @@ -0,0 +1,24 @@ +import { List } from "@mantine/core"; +import Page from "@/components/page"; +import { TrophyIcon, UsersThreeIcon } from "@phosphor-icons/react"; +import ListButton from "@/components/list-button"; +import { useQuery, useSuspenseQuery } from "@tanstack/react-query"; +import { tournamentQueries } from "@/features/tournaments/queries"; + +const ManageTournaments = () => { + const { data: tournaments } = useSuspenseQuery(tournamentQueries.list()); + return ( + + + {tournaments.map(t => ( + + ))} + + ); +}; + +export default ManageTournaments;