import { StylesProvider , ThemeProvider } from '@material-ui/styles' ; import NextPlausibleProvider from 'next-plausible' ; import { Fragment , ReactNode , useEffect } from 'react' ; import { MediaContextProvider } from '@/components/media' ; import { useDayjsLocaleReady } from '@/hooks/useDayjsLocaleReady' ; import { theme } from '@/theme' ; interface ProviderProps { children : ReactNode ; } function DayjsLocaleProvider ( { children } ) { const localeReady = useDayjsLocaleReady ( ) ; return < Fragment key = { String ( localeReady ) } > { children } < /Fragment>; } /**
 * Provider for Material UI related features. This handles removing SSR styles
 * on the client and injects the theme object into the entire component tree.
 */ function MaterialUIProvider ( { children } ) { useEffect ( ( ) => { const jssStyles = document . querySelector ( '#jss-server-side' ) ; jssStyles ?. parentElement ?. removeChild ?. ( jssStyles ) ; } , [ ] ) ; return ( < ThemeProvider theme = { theme } > < StylesProvider injectFirst > { children } < /StylesProvider> < /ThemeProvider>); } /**
 * Provider for Plausible functionality. This works by fetching the
 * `plausible.js` script via `next-plausible` and providing a typed
 * `plausible()` function in `hooks/usePlausible.ts`.
 *
 * By default, data will be sent to https://plausible.io/dev.napari-hub.org
 * dashboard. For production, data will be sent to
 * https://plausible.io/napari-hub.org.
 */ function PlausibleProvider ( { children } ) { return ( < NextPlausibleProvider domain = "napari.org" enabled = { process . env . PLAUSIBLE === 'true' } trackOutboundLinks > { children } < /NextPlausibleProvider>); } export function ApplicationProvider ( { children } ) { return ( < DayjsLocaleProvider > < PlausibleProvider > < MediaContextProvider > < MaterialUIProvider > { children } < /MaterialUIProvider> < /MediaContextProvider> < /PlausibleProvider> < /DayjsLocaleProvider>); }