Localize /[locale]/search page via next-intl; translate UI strings, filters, statuses; use bookTranslations to render book labels by locale; keep DB filters steady; support popular searches per locale.

This commit is contained in:
andupetcu
2025-09-20 18:08:43 +03:00
parent 71447d32c3
commit 0f31dfca8e
3 changed files with 127 additions and 36 deletions

View File

@@ -34,6 +34,8 @@ import {
History,
} from '@mui/icons-material'
import { useState, useEffect } from 'react'
import { useTranslations, useLocale } from 'next-intl'
import { translateBookName } from '@/lib/book-translations'
interface SearchResult {
id: string
@@ -52,6 +54,8 @@ interface SearchFilter {
export default function SearchPage() {
const theme = useTheme()
const t = useTranslations('pages.search')
const locale = useLocale()
const [searchQuery, setSearchQuery] = useState('')
const [results, setResults] = useState<SearchResult[]>([])
const [loading, setLoading] = useState(false)
@@ -74,10 +78,7 @@ export default function SearchPage() {
'Filipeni', 'Coloseni', 'Evrei', 'Iacob', '1 Petru', 'Apocalipsa'
]
const popularSearches = [
'dragoste', 'credință', 'speranță', 'iertare', 'pace',
'rugăciune', 'înțelepciune', 'bucurie', 'răbdare', 'milostivire'
]
const popularSearches: string[] = t.raw('popular.items')
useEffect(() => {
// Load search history from localStorage
@@ -181,10 +182,10 @@ export default function SearchPage() {
<Box sx={{ mb: 4, textAlign: 'center' }}>
<Typography variant="h3" component="h1" gutterBottom>
<Search sx={{ fontSize: 40, mr: 2, verticalAlign: 'middle' }} />
Căutare în Scriptură
{t('title')}
</Typography>
<Typography variant="body1" color="text.secondary">
Găsește rapid versete și pasaje din întreaga Biblie
{t('subtitle')}
</Typography>
</Box>
@@ -197,29 +198,29 @@ export default function SearchPage() {
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Typography variant="h6">
<FilterList sx={{ mr: 1, verticalAlign: 'middle' }} />
Filtre
{t('filters.title')}
</Typography>
<Button size="small" onClick={clearFilters}>
Șterge
{t('filters.clear')}
</Button>
</Box>
<FormControl fullWidth sx={{ mb: 2 }}>
<InputLabel>Testament</InputLabel>
<InputLabel>{t('filters.testament')}</InputLabel>
<Select
value={filters.testament}
label="Testament"
label={t('filters.testament')}
onChange={(e) => setFilters({ ...filters, testament: e.target.value as any })}
>
<MenuItem value="all">Toată Biblia</MenuItem>
<MenuItem value="old">Vechiul Testament</MenuItem>
<MenuItem value="new">Noul Testament</MenuItem>
<MenuItem value="all">{t('filters.options.all')}</MenuItem>
<MenuItem value="old">{t('filters.options.old')}</MenuItem>
<MenuItem value="new">{t('filters.options.new')}</MenuItem>
</Select>
</FormControl>
<Accordion>
<AccordionSummary expandIcon={<ExpandMore />}>
<Typography variant="body2">Cărți specifice</Typography>
<Typography variant="body2">{t('filters.specificBooks')}</Typography>
</AccordionSummary>
<AccordionDetails>
<Box sx={{ maxHeight: 200, overflow: 'auto' }}>
@@ -228,7 +229,7 @@ export default function SearchPage() {
.map((book) => (
<Chip
key={book}
label={book}
label={translateBookName(book, locale)}
size="small"
variant={filters.books.includes(book) ? 'filled' : 'outlined'}
onClick={() => {
@@ -252,7 +253,7 @@ export default function SearchPage() {
<CardContent>
<Typography variant="h6" gutterBottom>
<History sx={{ mr: 1, verticalAlign: 'middle' }} />
Căutări recente
{t('history.title')}
</Typography>
{searchHistory.slice(0, 5).map((query, index) => (
<Chip
@@ -272,7 +273,7 @@ export default function SearchPage() {
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
Căutări populare
{t('popular.title')}
</Typography>
{popularSearches.map((query, index) => (
<Chip
@@ -297,7 +298,7 @@ export default function SearchPage() {
<TextField
fullWidth
variant="outlined"
placeholder="Caută cuvinte, fraze sau referințe biblice..."
placeholder={t('input.placeholder')}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
onKeyPress={handleKeyPress}
@@ -325,14 +326,14 @@ export default function SearchPage() {
disabled={!searchQuery.trim() || loading}
sx={{ minWidth: 100 }}
>
{loading ? <CircularProgress size={20} color="inherit" /> : 'Caută'}
{loading ? <CircularProgress size={20} color="inherit" /> : t('button.search')}
</Button>
</Box>
{filters.books.length > 0 && (
<Box sx={{ mt: 2 }}>
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
Căutare în: {filters.books.join(', ')}
{t('searchIn', { books: filters.books.map(b => translateBookName(b, locale)).join(', ') })}
</Typography>
</Box>
)}
@@ -344,7 +345,7 @@ export default function SearchPage() {
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
Se caută...
{t('searching')}
</Typography>
<List>
{Array.from({ length: 3 }).map((_, index) => (
@@ -375,7 +376,7 @@ export default function SearchPage() {
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
Rezultate ({results.length})
{t('results', { count: results.length })}
</Typography>
<List>
@@ -388,7 +389,7 @@ export default function SearchPage() {
{result.book} {result.chapter}:{result.verse}
</Typography>
<Chip
label={`${Math.round(result.relevance * 100)}% relevanță`}
label={`${Math.round(result.relevance * 100)}% ${t('relevance')}`}
size="small"
color="primary"
variant="outlined"
@@ -411,10 +412,10 @@ export default function SearchPage() {
{!loading && searchQuery && results.length === 0 && (
<Paper sx={{ p: 4, textAlign: 'center' }}>
<Typography variant="h6" color="text.secondary" gutterBottom>
Nu s-au găsit rezultate
{t('noResults.title')}
</Typography>
<Typography variant="body2" color="text.secondary">
Încearcă modifici termenul de căutare sau ajustezi filtrele.
{t('noResults.description')}
</Typography>
</Paper>
)}
@@ -423,10 +424,10 @@ export default function SearchPage() {
<Paper sx={{ p: 4, textAlign: 'center' }}>
<MenuBook sx={{ fontSize: 64, color: 'text.secondary', mb: 2 }} />
<Typography variant="h6" color="text.secondary" gutterBottom>
Începe cauți în Scriptură
{t('empty.title')}
</Typography>
<Typography variant="body2" color="text.secondary">
Introdu un cuvânt, o frază sau o referință biblică pentru a găsi versete relevante.
{t('empty.description')}
</Typography>
</Paper>
)}
@@ -435,4 +436,4 @@ export default function SearchPage() {
</Container>
</Box>
)
}
}