Localize prayers page via next-intl messages (titles, categories, stats, buttons, dialog, samples); use Intl relative time; scalable for more locales.

app/[locale]/prayers/page.tsx

@@ -37,7 +37,7 @@ import {
   MoreVert,
 } from '@mui/icons-material'
 import { useState, useEffect } from 'react'
-import { useLocale } from 'next-intl'
+import { useTranslations, useLocale, useFormatter } from 'next-intl'
 
 interface PrayerRequest {
   id: string
@@ -53,6 +53,9 @@ interface PrayerRequest {
 export default function PrayersPage() {
   const theme = useTheme()
   const locale = useLocale()
+  const t = useTranslations('pages.prayers')
+  const tc = useTranslations('common')
+  const f = useFormatter()
   const [prayers, setPrayers] = useState<PrayerRequest[]>([])
   const [openDialog, setOpenDialog] = useState(false)
   const [newPrayer, setNewPrayer] = useState({
@@ -62,101 +65,51 @@ export default function PrayersPage() {
   })
   const [loading, setLoading] = useState(true)
 
-  const categories = locale === 'en'
+  const categories = [
-    ? [
+    { value: 'personal', label: t('categories.personal'), color: 'primary' },
-        { value: 'personal', label: 'Personal', color: 'primary' },
+    { value: 'family', label: t('categories.family'), color: 'secondary' },
-        { value: 'family', label: 'Family', color: 'secondary' },
+    { value: 'health', label: t('categories.health'), color: 'error' },
-        { value: 'health', label: 'Health', color: 'error' },
+    { value: 'work', label: t('categories.work'), color: 'warning' },
-        { value: 'work', label: 'Work', color: 'warning' },
+    { value: 'ministry', label: t('categories.ministry'), color: 'success' },
-        { value: 'ministry', label: 'Ministry', color: 'success' },
+    { value: 'world', label: t('categories.world'), color: 'info' },
-        { value: 'world', label: 'World', color: 'info' },
+  ]
-      ]
-    : [
-        { value: 'personal', label: 'Personal', color: 'primary' },
-        { value: 'family', label: 'Familie', color: 'secondary' },
-        { value: 'health', label: 'Sănătate', color: 'error' },
-        { value: 'work', label: 'Muncă', color: 'warning' },
-        { value: 'ministry', label: 'Serviciu', color: 'success' },
-        { value: 'world', label: 'Lume', color: 'info' },
-      ]
 
   // Sample data - in real app this would come from API
   useEffect(() => {
     // Simulate loading prayers
     setTimeout(() => {
-      setPrayers(
+      setPrayers([
-        locale === 'en'
+        {
-          ? [
+          id: '1',
-              {
+          title: t('samples.item1.title'),
-                id: '1',
+          description: t('samples.item1.description'),
-                title: 'Prayer for healing',
+          category: 'health',
-                description:
+          author: t('samples.item1.author'),
-                  'Please pray for my father who is in the hospital. He needs God\'s healing.',
+          timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
-                category: 'health',
+          prayerCount: 23,
-                author: 'Maria P.',
+          isPrayedFor: false,
-                timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
+        },
-                prayerCount: 23,
+        {
-                isPrayedFor: false,
+          id: '2',
-              },
+          title: t('samples.item2.title'),
-              {
+          description: t('samples.item2.description'),
-                id: '2',
+          category: 'work',
-                title: 'God\'s guidance in career',
+          author: t('samples.item2.author'),
-                description:
+          timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000),
-                  'Seeking God\'s direction for the next step in my career. Please pray for clarity and peace.',
+          prayerCount: 15,
-                category: 'work',
+          isPrayedFor: true,
-                author: 'Alex M.',
+        },
-                timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000),
+        {
-                prayerCount: 15,
+          id: '3',
-                isPrayedFor: true,
+          title: t('samples.item3.title'),
-              },
+          description: t('samples.item3.description'),
-              {
+          category: 'family',
-                id: '3',
+          author: t('samples.item3.author'),
-                title: 'Unity in our family',
+          timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
-                description:
+          prayerCount: 41,
-                  'Please pray for restoration of relationships in our family and for mutual forgiveness.',
+          isPrayedFor: false,
-                category: 'family',
+        },
-                author: 'Anonymous',
+      ])
-                timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
-                prayerCount: 41,
-                isPrayedFor: false,
-              },
-            ]
-          : [
-              {
-                id: '1',
-                title: 'Rugăciune pentru vindecare',
-                description:
-                  'Te rog să te rogi pentru tatăl meu care se află în spital. Are nevoie de vindecarea lui Dumnezeu.',
-                category: 'health',
-                author: 'Maria P.',
-                timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
-                prayerCount: 23,
-                isPrayedFor: false,
-              },
-              {
-                id: '2',
-                title: 'Îndrumarea lui Dumnezeu în carieră',
-                description:
-                  'Caut direcția lui Dumnezeu pentru următorul pas în cariera mea. Te rog să te rogi pentru claritate și pace.',
-                category: 'work',
-                author: 'Alexandru M.',
-                timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000),
-                prayerCount: 15,
-                isPrayedFor: true,
-              },
-              {
-                id: '3',
-                title: 'Unitatea în familia noastră',
-                description:
-                  'Rugați-vă pentru restaurarea relațiilor în familia noastră și pentru iertarea reciprocă.',
-                category: 'family',
-                author: 'Anonim',
-                timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
-                prayerCount: 41,
-                isPrayedFor: false,
-              },
-            ]
-      )
       setLoading(false)
     }, 1000)
   }, [locale])
@@ -213,17 +166,14 @@ export default function PrayersPage() {
   const formatTimestamp = (timestamp: Date) => {
     const now = new Date()
     const diff = now.getTime() - timestamp.getTime()
-    const hours = Math.floor(diff / (1000 * 60 * 60))
+    const minutes = Math.floor(diff / (1000 * 60))
+    const hours = Math.floor(minutes / 60)
     const days = Math.floor(hours / 24)
 
-    if (locale === 'en') {
+    if (days > 0) return f.relativeTime(-days, 'day')
-      if (days > 0) return `${days} day${days === 1 ? '' : 's'} ago`
+    if (hours > 0) return f.relativeTime(-hours, 'hour')
-      if (hours > 0) return `${hours} hour${hours === 1 ? '' : 's'} ago`
+    if (minutes > 0) return f.relativeTime(-minutes, 'minute')
-      return 'A few minutes ago'
+    return f.relativeTime(0, 'second')
-    }
-    if (days > 0) return `${days} zile în urmă`
-    if (hours > 0) return `${hours} ore în urmă`
-    return 'Acum câteva minute'
   }
 
   return (
@@ -234,12 +184,10 @@ export default function PrayersPage() {
         <Box sx={{ mb: 4, textAlign: 'center' }}>
           <Typography variant="h3" component="h1" gutterBottom>
             <Favorite sx={{ fontSize: 40, mr: 2, verticalAlign: 'middle', color: 'error.main' }} />
-            {locale === 'en' ? 'Prayer Wall' : 'Peretele de rugăciuni'}
+            {t('title')}
           </Typography>
           <Typography variant="body1" color="text.secondary">
-            {locale === 'en'
+            {t('subtitle')}
-              ? 'Share prayers and pray together with the community'
-              : 'Partajează rugăciuni și roagă-te împreună cu comunitatea'}
           </Typography>
         </Box>
 
@@ -249,7 +197,7 @@ export default function PrayersPage() {
             <Card>
               <CardContent>
                 <Typography variant="h6" gutterBottom>
-                  {locale === 'en' ? 'Categories' : 'Categorii'}
+                  {t('categories.title')}
                 </Typography>
                 <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                   {categories.map((category) => (
@@ -265,22 +213,12 @@ export default function PrayersPage() {
                 </Box>
 
                 <Typography variant="h6" sx={{ mt: 3, mb: 1 }}>
-                  {locale === 'en' ? 'Statistics' : 'Statistici'}
+                  {t('stats.title')}
                 </Typography>
                 <Typography variant="body2" color="text.secondary">
-                  {locale === 'en' ? (
+                  • {t('stats.activeRequests', { count: prayers.length })}<br />
-                    <>
+                  • {t('stats.totalPrayers', { count: prayers.reduce((sum, p) => sum + p.prayerCount, 0) })}<br />
-                      • {prayers.length} active requests<br />
+                  • {t('stats.youPrayed', { count: prayers.filter(p => p.isPrayedFor).length })}
-                      • {prayers.reduce((sum, p) => sum + p.prayerCount, 0)} total prayers<br />
-                      • {prayers.filter(p => p.isPrayedFor).length} requests you prayed for
-                    </>
-                  ) : (
-                    <>
-                      • {prayers.length} cereri active<br />
-                      • {prayers.reduce((sum, p) => sum + p.prayerCount, 0)} rugăciuni totale<br />
-                      • {prayers.filter(p => p.isPrayedFor).length} cereri la care te-ai rugat
-                    </>
-                  )}
                 </Typography>
               </CardContent>
             </Card>
@@ -377,23 +315,19 @@ export default function PrayersPage() {
                               onClick={() => handlePrayFor(prayer.id)}
                               disabled={prayer.isPrayedFor}
                             >
-                              {prayer.isPrayedFor
+                              {prayer.isPrayedFor ? t('buttons.prayed') : t('buttons.pray')}
-                                ? locale === 'en' ? 'Prayed' : 'M-am rugat'
-                                : locale === 'en' ? 'Pray' : 'Mă rog'}
                             </Button>
                             <Button
                               variant="outlined"
                               size="small"
                               startIcon={<Share />}
                             >
-                              {locale === 'en' ? 'Share' : 'Partajează'}
+                              {t('buttons.share')}
                             </Button>
                           </Box>
 
                           <Typography variant="body2" color="text.secondary">
-                            {locale === 'en'
+                            {t('stats.totalPrayers', { count: prayer.prayerCount })}
-                              ? `${prayer.prayerCount} ${prayer.prayerCount === 1 ? 'prayer' : 'prayers'}`
-                              : `${prayer.prayerCount} ${prayer.prayerCount === 1 ? 'rugăciune' : 'rugăciuni'}`}
                           </Typography>
                         </Box>
                       </CardContent>
@@ -424,7 +358,7 @@ export default function PrayersPage() {
         >
           <DialogTitle>
             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-              {locale === 'en' ? 'Add a prayer request' : 'Adaugă o cerere de rugăciune'}
+              {t('dialog.title')}
               <IconButton onClick={() => setOpenDialog(false)} size="small">
                 <Close />
               </IconButton>
@@ -433,7 +367,7 @@ export default function PrayersPage() {
           <DialogContent>
             <TextField
               fullWidth
-              label={locale === 'en' ? 'Title' : 'Titlu'}
+              label={t('dialog.titleLabel')}
               value={newPrayer.title}
               onChange={(e) => setNewPrayer({ ...newPrayer, title: e.target.value })}
               sx={{ mb: 2, mt: 1 }}
@@ -441,7 +375,7 @@ export default function PrayersPage() {
 
             <TextField
               fullWidth
-              label={locale === 'en' ? 'Category' : 'Categoria'}
+              label={t('dialog.categoryLabel')}
               select
               value={newPrayer.category}
               onChange={(e) => setNewPrayer({ ...newPrayer, category: e.target.value })}
@@ -456,24 +390,24 @@ export default function PrayersPage() {
 
             <TextField
               fullWidth
-              label={locale === 'en' ? 'Description' : 'Descriere'}
+              label={t('dialog.descriptionLabel')}
               multiline
               rows={4}
               value={newPrayer.description}
               onChange={(e) => setNewPrayer({ ...newPrayer, description: e.target.value })}
-              placeholder={locale === 'en' ? 'Describe your prayer request...' : 'Descrie cererea ta de rugăciune...'}
+              placeholder={t('dialog.placeholder')}
             />
           </DialogContent>
           <DialogActions>
             <Button onClick={() => setOpenDialog(false)}>
-              {locale === 'en' ? 'Cancel' : 'Anulează'}
+              {t('dialog.cancel')}
             </Button>
             <Button
               onClick={handleSubmitPrayer}
               variant="contained"
               disabled={!newPrayer.title.trim() || !newPrayer.description.trim()}
             >
-              {locale === 'en' ? 'Add prayer' : 'Adaugă rugăciunea'}
+              {t('dialog.submit')}
             </Button>
           </DialogActions>
         </Dialog>

messages/en.json

@@ -91,9 +91,56 @@
     },
     "prayers": {
       "title": "Prayers",
+      "subtitle": "Share prayers and pray together with the community",
       "addRequest": "Add prayer request",
       "anonymous": "Anonymous",
-      "prayFor": "Pray for this"
+      "prayFor": "Pray for this",
+      "categories": {
+        "title": "Categories",
+        "personal": "Personal",
+        "family": "Family",
+        "health": "Health",
+        "work": "Work",
+        "ministry": "Ministry",
+        "world": "World"
+      },
+      "stats": {
+        "title": "Statistics",
+        "activeRequests": "{count} active requests",
+        "totalPrayers": "{count} total prayers",
+        "youPrayed": "{count} requests you prayed for"
+      },
+      "buttons": {
+        "pray": "Pray",
+        "prayed": "Prayed",
+        "share": "Share"
+      },
+      "dialog": {
+        "title": "Add a prayer request",
+        "titleLabel": "Title",
+        "categoryLabel": "Category",
+        "descriptionLabel": "Description",
+        "placeholder": "Describe your prayer request...",
+        "cancel": "Cancel",
+        "submit": "Add prayer"
+      },
+      "samples": {
+        "item1": {
+          "title": "Prayer for healing",
+          "description": "Please pray for my father who is in the hospital. He needs God's healing.",
+          "author": "Maria P."
+        },
+        "item2": {
+          "title": "God's guidance in career",
+          "description": "Seeking God's direction for the next step in my career. Please pray for clarity and peace.",
+          "author": "Alex M."
+        },
+        "item3": {
+          "title": "Unity in our family",
+          "description": "Please pray for restoration of relationships in our family and for mutual forgiveness.",
+          "author": "Anonymous"
+        }
+      }
     },
     "search": {
       "title": "Search",
@@ -114,4 +161,4 @@
     "next": "Next",
     "previous": "Previous"
   }
-}
+}

messages/ro.json

@@ -91,9 +91,56 @@
     },
     "prayers": {
       "title": "Rugăciuni",
+      "subtitle": "Partajează rugăciuni și roagă-te împreună cu comunitatea",
       "addRequest": "Adaugă cerere de rugăciune",
       "anonymous": "Anonim",
-      "prayFor": "Mă rog pentru aceasta"
+      "prayFor": "Mă rog pentru aceasta",
+      "categories": {
+        "title": "Categorii",
+        "personal": "Personal",
+        "family": "Familie",
+        "health": "Sănătate",
+        "work": "Muncă",
+        "ministry": "Serviciu",
+        "world": "Lume"
+      },
+      "stats": {
+        "title": "Statistici",
+        "activeRequests": "{count} cereri active",
+        "totalPrayers": "{count} rugăciuni totale",
+        "youPrayed": "{count} cereri la care te-ai rugat"
+      },
+      "buttons": {
+        "pray": "Mă rog",
+        "prayed": "M-am rugat",
+        "share": "Partajează"
+      },
+      "dialog": {
+        "title": "Adaugă o cerere de rugăciune",
+        "titleLabel": "Titlu",
+        "categoryLabel": "Categoria",
+        "descriptionLabel": "Descriere",
+        "placeholder": "Descrie cererea ta de rugăciune...",
+        "cancel": "Anulează",
+        "submit": "Adaugă rugăciunea"
+      },
+      "samples": {
+        "item1": {
+          "title": "Rugăciune pentru vindecare",
+          "description": "Te rog să te rogi pentru tatăl meu care se află în spital. Are nevoie de vindecarea lui Dumnezeu.",
+          "author": "Maria P."
+        },
+        "item2": {
+          "title": "Îndrumarea lui Dumnezeu în carieră",
+          "description": "Caut direcția lui Dumnezeu pentru următorul pas în cariera mea. Te rog să te rogi pentru claritate și pace.",
+          "author": "Alexandru M."
+        },
+        "item3": {
+          "title": "Unitatea în familia noastră",
+          "description": "Rugați-vă pentru restaurarea relațiilor în familia noastră și pentru iertarea reciprocă.",
+          "author": "Anonim"
+        }
+      }
     },
     "search": {
       "title": "Căutare",
@@ -114,4 +161,4 @@
     "next": "Următorul",
     "previous": "Anterior"
   }
-}
+}