52 lines
1.5 KiB
TypeScript

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { useI18n } from '@/hooks/useI18n'
import React from 'react'
function I18nProvider({ children }: { children: React.ReactNode }) {
// Get saved locale from IndexedDB or default to French
const getInitialLocale = async (): Promise<'fr' | 'en'> => {
if (typeof window === 'undefined') {
return 'fr'
}
try {
const { storageService } = await import('@/lib/storage/indexedDB')
const savedLocale = await storageService.get<'fr' | 'en'>('zapwall-locale', 'app_storage')
if (savedLocale === 'fr' || savedLocale === 'en') {
return savedLocale
}
} catch {
// Fallback to browser locale detection
}
// Try to detect browser locale
const browserLocale = navigator.language.split('-')[0]
return browserLocale === 'en' ? 'en' : 'fr'
}
const [initialLocale, setInitialLocale] = React.useState<'fr' | 'en'>('fr')
const [localeLoaded, setLocaleLoaded] = React.useState(false)
React.useEffect(() => {
getInitialLocale().then((locale) => {
setInitialLocale(locale)
setLocaleLoaded(true)
})
}, [])
const { loaded } = useI18n(initialLocale)
if (!localeLoaded || !loaded) {
return <div className="min-h-screen bg-cyber-darker flex items-center justify-center text-neon-cyan">Loading...</div>
}
return <>{children}</>
}
export default function App({ Component, pageProps }: AppProps) {
return (
<I18nProvider>
<Component {...pageProps} />
</I18nProvider>
)
}