Files
omnivore/packages/web/pages/_app.tsx
Jackson Harper 553ea5d8a3 Remove old import
2024-03-05 10:21:42 +08:00

99 lines
2.4 KiB
TypeScript

import '../styles/globals.css'
import '../styles/articleInnerStyling.css'
import type { AppProps } from 'next/app'
import { IdProvider } from '@radix-ui/react-id'
import { NextRouter, useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import TopBarProgress from 'react-topbar-progress-indicator'
import {
KBarProvider,
KBarPortal,
KBarPositioner,
KBarAnimator,
KBarSearch,
Priority,
} from 'kbar'
import {
animatorStyle,
KBarResultsComponents,
searchStyle,
} from '../components/elements/KBar'
import { updateTheme } from '../lib/themeUpdater'
import { ThemeId } from '../components/tokens/stitches.config'
import { posthog } from 'posthog-js'
TopBarProgress.config({
barColors: {
'0': '#FFD234',
'1.0': '#FFD234',
},
shadowBlur: 0,
barThickness: 2,
})
const generateActions = (router: NextRouter) => {
const defaultActions = [
{
id: 'home',
section: 'Navigation',
name: 'Go to Home (Library) ',
shortcut: ['g', 'h'],
keywords: 'go home',
perform: () => router?.push('/home'),
},
{
id: 'lightTheme',
section: 'Preferences',
name: 'Change theme (light) ',
shortcut: ['v', 'l'],
keywords: 'light theme',
priority: Priority.LOW,
perform: () => updateTheme(ThemeId.Light),
},
{
id: 'darkTheme',
section: 'Preferences',
name: 'Change theme (dark) ',
shortcut: ['v', 'd'],
keywords: 'dark theme',
priority: Priority.LOW,
perform: () => updateTheme(ThemeId.Dark),
},
]
return defaultActions
}
export function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
const router = useRouter()
useEffect(() => {
const handleRouteChange = (url: string) => {
posthog.capture('$pageview')
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
return (
<KBarProvider actions={generateActions(router)}>
<KBarPortal>
<KBarPositioner style={{ zIndex: 100 }}>
<KBarAnimator style={animatorStyle}>
<KBarSearch style={searchStyle} />
<KBarResultsComponents />
</KBarAnimator>
</KBarPositioner>
</KBarPortal>
<IdProvider>
<Component {...pageProps} />
</IdProvider>
</KBarProvider>
)
}
export default OmnivoreApp