feat: experiment with spotlight

This commit is contained in:
iCrawl
2022-08-22 19:44:56 +02:00
parent ec7c6e3d3e
commit 24c128d649
3 changed files with 76 additions and 7 deletions

View File

@@ -1,13 +1,74 @@
import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';
import { SpotlightAction, SpotlightProvider } from '@mantine/spotlight';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import { type NextRouter, useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { VscPackage } from 'react-icons/vsc';
import { RouterTransition } from '~/components/RouterTransition';
import '../styles/unocss.css';
import '../styles/main.css';
const actions: (router: NextRouter) => SpotlightAction[] = (router: NextRouter) => [
{
title: 'Home',
description: 'Go to landing page',
onTrigger: () => void router.push('/'),
icon: <VscPackage size={20} />,
},
{
title: 'Packages',
description: 'Go to the package selection',
onTrigger: () => void router.push('/docs/packages'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-builders',
title: 'Builders',
description: 'Go to the @discordjs/builders documentation',
onTrigger: () => void router.push('/docs/packages/builders'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-collection',
title: 'Collection',
description: 'Go to the @discordjs/collection documentation',
onTrigger: () => void router.push('/docs/packages/collection'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-proxy',
title: 'Proxy',
description: 'Go to the @discordjs/proxy documentation',
onTrigger: () => void router.push('/docs/packages/proxy'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-rest',
title: 'REST',
description: 'Go to the @discordjs/rest documentation',
onTrigger: () => void router.push('/docs/packages/voice'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-voice',
title: 'Voice',
description: 'Go to the @discordjs/voice documentation',
onTrigger: () => void router.push('/docs/packages/ws'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-ws',
title: 'WS',
description: 'Go to the @discordjs/ws documentation',
onTrigger: () => void router.push('/docs'),
icon: <VscPackage size={20} />,
},
];
export default function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter();
const preferredColorScheme = useColorScheme('dark', { getInitialValueInEffect: true });
const [colorScheme, setColorScheme] = useState<ColorScheme>(preferredColorScheme);
const toggleColorScheme = (value?: ColorScheme) =>
@@ -52,8 +113,10 @@ export default function MyApp({ Component, pageProps }: AppProps) {
withNormalizeCSS
withGlobalStyles
>
<RouterTransition />
<Component {...pageProps} />
<SpotlightProvider shortcut={['mod + P', 'mod + K', '/']} actions={actions(router)}>
<RouterTransition />
<Component {...pageProps} />
</SpotlightProvider>
</MantineProvider>
</ColorSchemeProvider>
</>