Implement complete multi-language support with Romanian/English
- Added next-intl for internationalization with Romanian as default locale - Restructured app directory with [locale] routing (/ro, /en) - Created comprehensive translation files for both languages - Fixed Next.js 15 async params compatibility in layout components - Updated all components to use proper i18n hooks and translations - Configured middleware for locale routing and fallbacks - Fixed FloatingChat component translation array handling - Restored complete home page with internationalized content - Fixed Material-UI Slide component prop error (mountOnExit → unmountOnExit) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
88
components/layout/language-switcher.tsx
Normal file
88
components/layout/language-switcher.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter, usePathname } from 'next/navigation'
|
||||
import { useLocale, useTranslations } from 'next-intl'
|
||||
import {
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Box,
|
||||
Typography,
|
||||
ListItemIcon,
|
||||
} from '@mui/material'
|
||||
import { Language, Check } from '@mui/icons-material'
|
||||
|
||||
const languages = [
|
||||
{ code: 'ro', name: 'Română', flag: '🇷🇴' },
|
||||
{ code: 'en', name: 'English', flag: '🇺🇸' },
|
||||
]
|
||||
|
||||
export function LanguageSwitcher() {
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const locale = useLocale()
|
||||
const t = useTranslations('navigation')
|
||||
|
||||
const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event.currentTarget)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null)
|
||||
}
|
||||
|
||||
const handleLanguageChange = (newLocale: string) => {
|
||||
// Remove current locale from pathname and add new one
|
||||
const pathWithoutLocale = pathname.replace(`/${locale}`, '') || '/'
|
||||
const newPath = `/${newLocale}${pathWithoutLocale === '/' ? '' : pathWithoutLocale}`
|
||||
|
||||
router.push(newPath)
|
||||
handleClose()
|
||||
}
|
||||
|
||||
const currentLanguage = languages.find(lang => lang.code === locale)
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconButton
|
||||
onClick={handleOpen}
|
||||
sx={{ color: 'white' }}
|
||||
aria-label={t('language')}
|
||||
>
|
||||
<Language />
|
||||
</IconButton>
|
||||
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleClose}
|
||||
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
||||
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
||||
>
|
||||
{languages.map((language) => (
|
||||
<MenuItem
|
||||
key={language.code}
|
||||
onClick={() => handleLanguageChange(language.code)}
|
||||
selected={language.code === locale}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: 120 }}>
|
||||
<Typography component="span" sx={{ fontSize: '1.2rem' }}>
|
||||
{language.flag}
|
||||
</Typography>
|
||||
<Typography sx={{ flexGrow: 1 }}>
|
||||
{language.name}
|
||||
</Typography>
|
||||
{language.code === locale && (
|
||||
<ListItemIcon sx={{ minWidth: 'auto' }}>
|
||||
<Check fontSize="small" />
|
||||
</ListItemIcon>
|
||||
)}
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user