diff --git a/frontend/package.json b/frontend/package.json index 0576f201..d77d2ab9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,6 +27,7 @@ "@mantine/hooks": "^6.0.5", "@mantine/next": "^6.0.5", "@mantine/notifications": "^6.0.5", + "@mantine/spotlight": "^6.0.5", "@next/bundle-analyzer": "^13.3.1", "@react-icons/all-files": "^4.1.0", "@tabler/icons-react": "^2.17.0", diff --git a/frontend/src/components/brackets/brackets.tsx b/frontend/src/components/brackets/brackets.tsx index d21b365e..e334bc36 100644 --- a/frontend/src/components/brackets/brackets.tsx +++ b/frontend/src/components/brackets/brackets.tsx @@ -46,7 +46,8 @@ function getRoundsGridCols( ); } - const showAddRoundButton = readOnly || stageItemIsHandledAutomatically(stageItem); + const showAddRoundButton = + tournamentData != null && (readOnly || stageItemIsHandledAutomatically(stageItem)); return ( diff --git a/frontend/src/components/modals/spotlight.tsx b/frontend/src/components/modals/spotlight.tsx new file mode 100644 index 00000000..b0d7f383 --- /dev/null +++ b/frontend/src/components/modals/spotlight.tsx @@ -0,0 +1,91 @@ +import { SpotlightAction, SpotlightProvider } from '@mantine/spotlight'; +import { + IconCalendarEvent, + IconHome, + IconSearch, + IconSettings, + IconSoccerField, + IconTrophy, + IconUser, + IconUsers, + IconUsersGroup, +} from '@tabler/icons-react'; +import { useRouter } from 'next/router'; +import React from 'react'; + +import { getTournamentIdFromRouter } from '../utils/util'; + +export function Spotlight() { + const router = useRouter(); + const { id: tournamentId } = getTournamentIdFromRouter(); + + const actions: SpotlightAction[] = [ + { + title: 'Home', + description: 'Get to home page', + onTrigger: () => router.push('/'), + icon: , + }, + { + title: 'Clubs', + description: 'View, add or delete clubs', + onTrigger: () => router.push('/clubs'), + icon: , + }, + { + title: 'User Settings', + description: 'Change name, email, password etc.', + onTrigger: () => router.push('/user'), + icon: , + }, + ]; + + const tournamentActions: SpotlightAction[] = [ + { + title: 'Planning', + description: 'Change planning of matches', + onTrigger: () => router.push(`/tournaments/${tournamentId}/schedule`), + icon: , + }, + { + title: 'Teams', + description: 'View, add or delete teams', + onTrigger: () => router.push(`/tournaments/${tournamentId}/teams`), + icon: , + }, + { + title: 'Players', + description: 'View, add or delete players', + onTrigger: () => router.push(`/tournaments/${tournamentId}/players`), + icon: , + }, + { + title: 'Stages', + description: 'Change the layout of the tournament', + onTrigger: () => router.push(`/tournaments/${tournamentId}/stages`), + icon: , + }, + { + title: 'Courts', + description: 'View, add or delete courts', + onTrigger: () => router.push(`/tournaments/${tournamentId}/courts`), + icon: , + }, + { + title: 'Tournament settings', + description: 'Change settings of the tournament', + onTrigger: () => router.push(`/tournaments/${tournamentId}/settings`), + icon: , + }, + ]; + const allActions = tournamentId >= 0 ? actions.concat(tournamentActions) : actions; + return ( + } + searchPlaceholder="Search..." + shortcut="mod + k" + nothingFoundMessage="Nothing found..." + /> + ); +} diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx index 43a10c5b..5ee7eff6 100644 --- a/frontend/src/pages/_app.tsx +++ b/frontend/src/pages/_app.tsx @@ -6,6 +6,8 @@ import NextApp, { AppContext, AppProps } from 'next/app'; import Head from 'next/head'; import { useState } from 'react'; +import { Spotlight } from '../components/modals/spotlight'; + export default function App(props: AppProps & { colorScheme: ColorScheme }) { const { Component, pageProps } = props; const [colorScheme, setColorScheme] = useState(props.colorScheme); @@ -28,6 +30,7 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) { + diff --git a/frontend/src/pages/tournaments/[id].tsx b/frontend/src/pages/tournaments/[id].tsx index 6df9a39f..8f35224c 100644 --- a/frontend/src/pages/tournaments/[id].tsx +++ b/frontend/src/pages/tournaments/[id].tsx @@ -5,7 +5,6 @@ import { SWRResponse } from 'swr'; import NotFoundTitle from '../404'; import Brackets from '../../components/brackets/brackets'; -import { NextStageButton } from '../../components/buttons/next_stage_button'; import Scheduler from '../../components/scheduling/scheduling'; import StagesTab from '../../components/utils/stages_tab'; import { getTournamentIdFromRouter, responseIsValid } from '../../components/utils/util'; @@ -140,9 +139,8 @@ export default function TournamentPage() { /> - diff --git a/frontend/yarn.lock b/frontend/yarn.lock index a7a7bfc3..90466e73 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1184,6 +1184,13 @@ "@mantine/utils" "6.0.10" react-transition-group "4.4.2" +"@mantine/spotlight@^6.0.5": + version "6.0.21" + resolved "https://registry.yarnpkg.com/@mantine/spotlight/-/spotlight-6.0.21.tgz#98f507bd3429fee1f2b57ad5ef9f88d1d8d8ff32" + integrity sha512-xJqF2Vpn8s6I4mSF+iCi7IzqL8iaqbvq0RcYlF1usLZYW2HrArX31s1r11DmzqM1PIuBQUhquW8jUXx/MZy3oA== + dependencies: + "@mantine/utils" "6.0.21" + "@mantine/ssr@6.0.10": version "6.0.10" resolved "https://registry.yarnpkg.com/@mantine/ssr/-/ssr-6.0.10.tgz#58e41adcf38e82f513e8e289110d0efe4eba4a7e"