create-nextjs-cms 0.5.91 → 0.5.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.5.91",
+  "version": "0.5.93",
   "private": false,
   "type": "module",
   "bin": {

package/templates/default/app/(auth)/auth/login/LoginPage.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import InfoCard from '@/components/InfoCard'
 import Link from 'next/link'
 import { Switch } from '@/components/ui/switch'
@@ -20,6 +20,7 @@ type fromErrors = {
 }
 
 export default function LoginPage() {
+    const t = useI18n()
     const session = useSession()
     const searchParams = useSearchParams()
     const router = useRouter()
@@ -31,7 +32,7 @@ export default function LoginPage() {
         event.preventDefault()
         if (loginButtonRef.current) {
             loginButtonRef.current.disabled = true
-            loginButtonRef.current.innerHTML = getString('loading')
+            loginButtonRef.current.innerHTML = t('loading')
         }
         try {
             await login({
@@ -41,12 +42,12 @@ export default function LoginPage() {
         } catch (error: any) {
             if (loginButtonRef.current) {
                 loginButtonRef.current.disabled = false
-                loginButtonRef.current.innerHTML = getString('login')
+                loginButtonRef.current.innerHTML = t('login')
             }
 
             if (!error.message) {
                 setFormErrors({
-                    general: getString('server_error'),
+                    general: t('serverError'),
                 })
             } else {
                 setFormErrors({ general: error.message })
@@ -92,7 +93,7 @@ export default function LoginPage() {
                         nextjs-cms
                     </span>
                     <h2 className='mt-10 text-center text-2xl leading-9 font-bold tracking-tight'>
-                        {getString('login_to_your_account')}
+                        {t('loginToYourAccount')}
                     </h2>
                 </div>
 
@@ -100,14 +101,14 @@ export default function LoginPage() {
                     <form ref={formRef} className='space-y-6'>
                         <div>
                             <label htmlFor='username' className='block text-sm leading-6 font-medium'>
-                                {getString('username')}
+                                {t('username')}
                             </label>
                             <div>
                                 <input
                                     id='username'
                                     name='username'
                                     type='text'
-                                    placeholder={getString('username')}
+                                    placeholder={t('username')}
                                     required
                                     className='bg-background text-foreground block w-full rounded-md border-0 p-3 shadow-xs ring-1 ring-gray-300 outline-0 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6'
                                 />
@@ -116,14 +117,14 @@ export default function LoginPage() {
 
                         <div>
                             <label htmlFor='password' className='block text-sm leading-6 font-medium'>
-                                {getString('password')}
+                                {t('password')}
                             </label>
                             <div>
                                 <input
                                     id='password'
                                     name='password'
                                     type='password'
-                                    placeholder={getString('password')}
+                                    placeholder={t('password')}
                                     required
                                     className='bg-background text-foreground block w-full rounded-md border-0 p-3 shadow-xs ring-1 ring-sky-300 outline-0 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6'
                                 />
@@ -131,7 +132,7 @@ export default function LoginPage() {
                             <div className='mt-2 text-end'>
                                 <div className='text-sm'>
                                     <Link href='#' className='font-semibold text-indigo-600 hover:text-indigo-500'>
-                                        {getString('forgot_password')}
+                                        {t('forgotPassword')}
                                     </Link>
                                 </div>
                             </div>
@@ -141,7 +142,7 @@ export default function LoginPage() {
                                 <div className='flex gap-2'>
                                     <div className='flex items-center space-x-2'>
                                         <Switch id='remember_me_check' name='rm' />
-                                        <Label htmlFor='remember_me_check'>{getString('remember_me')}</Label>
+                                        <Label htmlFor='remember_me_check'>{t('rememberMe')}</Label>
                                     </div>
                                 </div>
                             </div>
@@ -155,7 +156,7 @@ export default function LoginPage() {
                                 type='submit'
                                 className='flex w-full justify-center rounded-md bg-linear-to-r from-green-400 to-blue-500 font-extrabold hover:to-sky-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 focus-visible:outline-solid'
                             >
-                                {getString('login')}
+                                {t('login')}
                             </Button>
                         </div>
                     </form>

package/templates/default/app/(auth)/layout.tsx

@@ -0,0 +1,56 @@
+import { Inter, Cairo } from 'next/font/google'
+import '../globals.css'
+import type { Metadata } from 'next'
+import { cn } from '@/lib/utils'
+import { ThemeProvider } from '@/components/ThemeProvider'
+import Providers from '@/app/providers'
+import auth from 'nextjs-cms/auth'
+import { getCMSConfig } from 'nextjs-cms/core'
+import { I18nProviderClient } from 'nextjs-cms/translations/client'
+
+const inter = Inter({
+    subsets: ['latin'],
+    variable: '--font-sans',
+})
+
+const cairo = Cairo({
+    subsets: ['arabic', 'latin'],
+    variable: '--font-cairo',
+})
+
+export async function generateMetadata(): Promise<Metadata> {
+    const cmsConfig = await getCMSConfig()
+    return {
+        title: cmsConfig.ui.title,
+        description: 'nextjs-cms',
+    }
+}
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const session = await auth()
+    const cmsConfig = await getCMSConfig()
+    const locale = session?.user?.locale ?? 'en'
+    const isRTL = locale === 'ar'
+
+    return (
+        <html lang={locale} dir={isRTL ? 'rtl' : 'ltr'} suppressHydrationWarning>
+            <body
+                className={cn(
+                    'bg-background min-h-screen font-sans antialiased',
+                    isRTL ? cairo.variable : inter.variable,
+                )}
+            >
+                <I18nProviderClient locale={locale}>
+                    <ThemeProvider
+                        attribute='class'
+                        defaultTheme={cmsConfig.ui.defaultTheme}
+                        enableSystem
+                        disableTransitionOnChange
+                    >
+                        <Providers session={session ?? undefined}>{children}</Providers>
+                    </ThemeProvider>
+                </I18nProviderClient>
+            </body>
+        </html>
+    )
+}

package/templates/default/app/(rootLayout)/layout.tsx

@@ -1,16 +1,66 @@
-import Layout from '@/components/Layout'
-import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import { Inter, Cairo } from 'next/font/google'
+import '../globals.css'
+import type { Metadata } from 'next'
+import { cn } from '@/lib/utils'
+import { ThemeProvider } from '@/components/ThemeProvider'
+import Providers from '@/app/providers'
+import auth from 'nextjs-cms/auth'
 import { getCMSConfig } from 'nextjs-cms/core'
+import { I18nProviderClient } from 'nextjs-cms/translations/client'
+import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import Layout from '@/components/Layout'
+
+const inter = Inter({
+    subsets: ['latin'],
+    variable: '--font-sans',
+})
+
+const cairo = Cairo({
+    subsets: ['arabic', 'latin'],
+    variable: '--font-cairo',
+})
+
+export async function generateMetadata(): Promise<Metadata> {
+    const cmsConfig = await getCMSConfig()
+    return {
+        title: cmsConfig.ui.title,
+        description: 'nextjs-cms',
+    }
+}
 
 export default async function CMSLayout({ children }: { children: React.ReactNode }) {
-    await api.navigation.getSidebar.prefetch()
+    const session = await auth()
     const cmsConfig = await getCMSConfig()
+    const locale = session?.user?.locale ?? 'en'
+    const isRTL = locale === 'ar'
+    await api.navigation.getSidebar.prefetch()
 
     return (
-        <HydrateClient>
-            <Layout logoUrlPath={cmsConfig.ui.logo} logoText={cmsConfig.ui.logoText}>
-                {children}
-            </Layout>
-        </HydrateClient>
+        <html lang={locale} dir={isRTL ? 'rtl' : 'ltr'} suppressHydrationWarning>
+            <body
+                className={cn(
+                    'bg-background min-h-screen font-sans antialiased',
+                    isRTL ? cairo.variable : inter.variable,
+                )}
+            >
+                <I18nProviderClient locale={locale}>
+                    <ThemeProvider
+                        attribute='class'
+                        defaultTheme={cmsConfig.ui.defaultTheme}
+                        enableSystem
+                        disableTransitionOnChange
+                    >
+                        <Providers session={session ?? undefined}>
+                        <HydrateClient>
+                            <Layout logoUrlPath={cmsConfig.ui.logo} logoText={cmsConfig.ui.logoText}>
+                                {children}
+                            </Layout>
+                        </HydrateClient>
+                        </Providers>
+                    </ThemeProvider>
+                </I18nProviderClient>
+            </body>
+        </html>
+        
     )
 }

package/templates/default/app/globals.css

@@ -22,7 +22,7 @@
   --breakpoint-2xl-sidebar: 1920px;
 
   --font-sans:
-    var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    var(--font-cairo, var(--font-sans)), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
   --color-border: hsl(var(--border));

package/templates/default/components/AdminCard.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import React from 'react'
 import useModal from '@/hooks/useModal'
 import ProtectedImage from '@/components/ProtectedImage'
@@ -19,6 +19,7 @@ export default function AdminCard({
     admin: RouterOutputs['admins']['list']['admins'][0]
     action: any
 }) {
+    const t = useI18n()
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const { toast } = useToast()
 
@@ -29,14 +30,14 @@ export default function AdminCard({
             setModalResponse(null)
             toast({
                 variant: 'success',
-                title: getString('delete_admin'),
-                description: getString('adminDeletedSuccessfully'),
+                title: t('deleteAdmin'),
+                description: t('adminDeletedSuccessfully'),
             })
         },
         onError: (error) => {
             toast({
                 variant: 'destructive',
-                title: getString('delete_admin'),
+                title: t('deleteAdmin'),
                 description: error.message,
             })
         },
@@ -46,8 +47,8 @@ export default function AdminCard({
         if ([1, '1'].includes(admin.id)) {
             toast({
                 variant: 'destructive',
-                title: getString('delete_admin'),
-                description: getString('masterAdminCannotBeDeleted'),
+                title: t('deleteAdmin'),
+                description: t('masterAdminCannotBeDeleted'),
             })
             return
         }
@@ -107,9 +108,9 @@ export default function AdminCard({
                     variant='default'
                     onClick={() => {
                         setModal({
-                            title: getString('edit_admin'),
+                            title: t('editAdmin'),
                             body: [1, '1'].includes(admin.id) ? (
-                                <div className='p-4'>{getString('masterAdminCannotBeModified')}</div>
+                                <div className='p-4'>{t('masterAdminCannotBeModified')}</div>
                             ) : (
                                 <div className='p-4'>{<AdminEditPage id={admin.id} action={() => action()} />}</div>
                             ),
@@ -120,25 +121,25 @@ export default function AdminCard({
                         })
                     }}
                 >
-                    {getString('edit')}
+                    {t('edit')}
                 </Button>
                 <Button
                     variant='destructive'
                     onClick={() => {
                         setModal({
-                            title: getString('delete_admin'),
+                            title: t('deleteAdmin'),
                             body: [1, '1'].includes(admin.id) ? (
-                                <div className='p-4'>{getString('masterAdminCannotBeDeleted')}</div>
+                                <div className='p-4'>{t('masterAdminCannotBeDeleted')}</div>
                             ) : (
                                 <div className='p-4'>
                                     <div className='flex flex-col gap-4'>
-                                        <div>{getString('delete_admin_text')}</div>
+                                        <div>{t('deleteAdminText')}</div>
                                         <div className='flex gap-2'>
                                             <button
                                                 className='rounded bg-green-600 px-2 py-1 text-white'
                                                 onClick={handleDeleteAdmin}
                                             >
-                                                Yes
+                                                {t('yes')}
                                             </button>
                                             <button
                                                 className='rounded bg-red-800 px-2 py-1 text-white'
@@ -146,7 +147,7 @@ export default function AdminCard({
                                                     setModal(null)
                                                 }}
                                             >
-                                                No
+                                                {t('no')}
                                             </button>
                                         </div>
                                     </div>
@@ -158,7 +159,7 @@ export default function AdminCard({
                         })
                     }}
                 >
-                    {getString('delete')}
+                    {t('delete')}
                 </Button>
             </CardFooter>
         </Card>

package/templates/default/components/AdminEditPage.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import React from 'react'
 import useModal from '@/hooks/useModal'
 import { trpc } from '@/app/_trpc/client'
@@ -7,6 +7,7 @@ import LoadingSpinners from './LoadingSpinners'
 import { Button } from '@/components/ui/button'
 
 export default function AdminEditPage({ id, action }: { id: string; action: any }) {
+    const t = useI18n()
     const { setModal } = useModal()
     const [allChecked, setAllChecked] = React.useState<boolean | 'edited' | null>(null)
     const utils = trpc.useUtils()
@@ -14,7 +15,7 @@ export default function AdminEditPage({ id, action }: { id: string; action: any
     const submitMutation = trpc.admins.update.useMutation({
         onError: (error) => {
             setModal({
-                title: getString('edit_admin'),
+                title: t('editAdmin'),
                 body: (
                     <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
                         {error.message}
@@ -30,7 +31,7 @@ export default function AdminEditPage({ id, action }: { id: string; action: any
             action()
             utils.admins.get.invalidate(id)
             setModal({
-                title: getString('edit_admin'),
+                title: t('editAdmin'),
                 body: (
                     <div className='rounded border-2 border-dashed border-green-500 bg-green-100 p-2 text-green-800'>
                         {data.status}
@@ -68,13 +69,13 @@ export default function AdminEditPage({ id, action }: { id: string; action: any
     return (
         <div>
             <h2>
-                {getString('edit_admin_text')}: {data?.admin.user}
+                {t('editAdminText')}: {data?.admin.user}
             </h2>
             <div>
                 {isLoading ? <LoadingSpinners /> : null}
                 {data && data.allRoles && data.allRoles.length > 0 ? (
                     <form onSubmit={handleSubmit}>
-                        <div className='mt-5 w-full font-semibold'>{getString('admin_privileges')}</div>
+                        <div className='mt-5 w-full font-semibold'>{t('adminPrivileges')}</div>
                         <div className='flex'>
                             <Button
                                 className='border border-foreground'
@@ -90,7 +91,7 @@ export default function AdminEditPage({ id, action }: { id: string; action: any
                                     }
                                 }}
                             >
-                                {allChecked === true ? getString('removeAll') : getString('checkAll')}
+                                {allChecked === true ? t('removeAll') : t('checkAll')}
                             </Button>
                         </div>
                         <div className='mt-2 grid w-full grid-cols-1 gap-2 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-3 xl-sidebar:grid-cols-4 2xl-sidebar:grid-cols-5'>
@@ -112,7 +113,7 @@ export default function AdminEditPage({ id, action }: { id: string; action: any
                         </div>
                         <div className='mt-4'>
                             <button type='submit' className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
-                                {getString('save')}
+                                {t('save')}
                             </button>
                         </div>
                     </form>

package/templates/default/components/AdminPrivilegeCard.tsx

@@ -2,7 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import React, { useEffect } from 'react'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { Badge } from '@/components/ui/badge'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import type { RouterOutputs } from 'nextjs-cms/api'
@@ -24,6 +24,7 @@ export default function AdminRoleCard({
         publisher: boolean
     }
 }) {
+    const t = useI18n()
     const [checked, setChecked] = React.useState<boolean | 'indeterminate'>(defaultValue.operations === 'cud')  
     const [publisherChecked, setPublisherChecked] = React.useState<boolean>(defaultValue.publisher)
     const [value, setValue] = React.useState<string>(defaultValue.operations)
@@ -85,7 +86,7 @@ export default function AdminRoleCard({
                         htmlFor={privilege.title + '_new'}
                         className='ms-2 block text-sm font-medium text-foreground'
                     >
-                        Full Access
+                        {t('fullAccess')}
                     </label>
                 </div>
 
@@ -107,7 +108,7 @@ export default function AdminRoleCard({
                             htmlFor={`${privilege.title}_publisher`}
                             className={`ms-2 block text-sm font-medium text-foreground`}
                         >
-                            <span className={`${value === 'none' ? 'opacity-40' : ''}`}>Publisher</span>{' '}
+                            <span className={`${value === 'none' ? 'opacity-40' : ''}`}>{t('publisher')}</span>{' '}
                             <TooltipProvider delayDuration={0}>
                                 <Tooltip>
                                     <TooltipTrigger asChild>
@@ -116,7 +117,7 @@ export default function AdminRoleCard({
                                         </span>
                                     </TooltipTrigger>
                                     <TooltipContent>
-                                        <p>Only publishers can publish/unpublish items</p>
+                                        <p>{t('publisherTooltip')}</p>
                                     </TooltipContent>
                                 </Tooltip>
                             </TooltipProvider>
@@ -125,7 +126,7 @@ export default function AdminRoleCard({
                 ) : null}
 
                 <div className='mt-2 flex flex-col border-t p-2'>
-                    <div className='text-sm'>Custom:</div>
+                    <div className='text-sm'>{t('customAccess')}</div>
                     <Select
                         defaultValue={'none'}
                         value={value}
@@ -148,20 +149,20 @@ export default function AdminRoleCard({
                         }}
                     >
                         <SelectTrigger className='w-[180px]'>
-                            <SelectValue placeholder={getString('select')} />
+                            <SelectValue placeholder={t('select')} />
                         </SelectTrigger>
                         <SelectContent>
                             <SelectItem value='none'>
-                                <Badge variant='outline'>No Access</Badge>
+                                <Badge variant='outline'>{t('noAccess')}</Badge>
                             </SelectItem>
                             <SelectItem value='c'>
-                                <Badge variant='secondary'>C</Badge> <span className='italic'>Create</span>
+                                <Badge variant='secondary'>C</Badge> <span className='italic'>{t('create')}</span>
                             </SelectItem>
                             <SelectItem value='u'>
-                                <Badge variant='secondary'>U</Badge> <span className='italic'>Update</span>
+                                <Badge variant='secondary'>U</Badge> <span className='italic'>{t('update')}</span>
                             </SelectItem>
                             <SelectItem value='d'>
-                                <Badge variant='secondary'>D</Badge> <span className='italic'>Delete</span>
+                                <Badge variant='secondary'>D</Badge> <span className='italic'>{t('delete')}</span>
                             </SelectItem>
                             <SelectItem value='cu'>
                                 <Badge variant='secondary'>C + U</Badge>
@@ -173,7 +174,7 @@ export default function AdminRoleCard({
                                 <Badge variant='secondary'>U + D</Badge>
                             </SelectItem>
                             <SelectItem value='cud'>
-                                <Badge variant='success'>C + U + D</Badge> (All)
+                                <Badge variant='success'>C + U + D</Badge> {t('allPermissions')}
                             </SelectItem>
                         </SelectContent>
                     </Select>

package/templates/default/components/AdminsPage.tsx

@@ -1,13 +1,14 @@
 'use client'
 
 import AdminCard from '@/components/AdminCard'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import NewAdminForm from '@/components/NewAdminForm'
 import ContainerBox from '@/components/ContainerBox'
 import { trpc } from '@/app/_trpc/client'
 import ErrorComponent from './ErrorComponent'
 
 const AdminsPage = () => {
+    const t = useI18n()
     const [data, {refetch}] = trpc.admins.list.useSuspenseQuery()
 
     if (data.error) {
@@ -17,16 +18,16 @@ const AdminsPage = () => {
     return (
         <div className='w-full'>
             <div className='bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-foreground dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
-                <h1 className='text-3xl'>{getString('admins')}</h1>
+                <h1 className='text-3xl'>{t('admins')}</h1>
             </div>
 
             <div className='flex flex-col gap-2 p-4'>
-                <ContainerBox title={getString('create_new_admin')}>
+                <ContainerBox title={t('createNewAdmin')}>
                     {data && data.privileges && <NewAdminForm action={() => refetch()} privileges={data.privileges} />}
                 </ContainerBox>
 
                 {data && data.admins && data.admins.length > 0 && (
-                    <ContainerBox title={getString('admins_list')}>
+                    <ContainerBox title={t('adminsList')}>
                         <div className='mt-2 grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>
                             {data.admins.map((admin) => (
                                 <AdminCard key={admin.id} action={() => refetch()} admin={admin} />

package/templates/default/components/AnalyticsPage.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import React, { useEffect, useRef } from 'react'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
 import { DatePickerWithRange } from '@/components/form/DateRangeFormInput'
 import { MonthlyPageViews } from '@/components/analytics/MonthlyPageViews'
@@ -19,6 +19,7 @@ import { trpc } from '@/app/_trpc/client'
 ChartJS.register(ArcElement, Tooltip, Legend)
 
 const AnalyticsPage = () => {
+    const t = useI18n()
     const controller = new AbortController()
     const datePickerRangeRef = useRef<HTMLDivElement>(null)
     const [fromDate, setFromDate] = React.useState<Date | string>('30daysAgo')
@@ -35,7 +36,7 @@ const AnalyticsPage = () => {
     return (
         <div className='w-full'>
             <div className='bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-foreground dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
-                <h1 className='text-3xl'>{getString('analytics')}</h1>
+                <h1 className='text-3xl'>{t('analytics')}</h1>
             </div>
             <div className='p-4'>
                 <div className='flex gap-2'>
@@ -82,11 +83,11 @@ const AnalyticsPage = () => {
                             }}
                         >
                             <TabsList>
-                                <TabsTrigger value='today'>Today</TabsTrigger>
-                                <TabsTrigger value='lastWeek'>Last 7 Days</TabsTrigger>
-                                <TabsTrigger value='lastMonth'>Last 30 Days</TabsTrigger>
-                                <TabsTrigger value='lastYear'>Last 365 Days</TabsTrigger>
-                                <TabsTrigger value='custom'>Custom</TabsTrigger>
+                                <TabsTrigger value='today'>{t('today')}</TabsTrigger>
+                                <TabsTrigger value='lastWeek'>{t('last7Days')}</TabsTrigger>
+                                <TabsTrigger value='lastMonth'>{t('last30Days')}</TabsTrigger>
+                                <TabsTrigger value='lastYear'>{t('last365Days')}</TabsTrigger>
+                                <TabsTrigger value='custom'>{t('custom')}</TabsTrigger>
                             </TabsList>
                         </Tabs>
                     </Tabs>

package/templates/default/components/BrowsePage.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useRef } from 'react'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import SectionItemCard from '@/components/SectionItemCard'
 import ContainerBox from '@/components/ContainerBox'
 import Pagination from '@/components/pagination/Pagination'
@@ -15,6 +15,7 @@ import { capitalizeWords } from 'nextjs-cms/utils'
 import ErrorComponent from '@/components/ErrorComponent'
 
 export default function BrowsePage({ section, page }: { section: string; page: string }) {
+    const t = useI18n()
     const pageInt = parseInt(page) ?? 1
     const params = useSearchParams()
     const router = useRouter()
@@ -50,24 +51,24 @@ export default function BrowsePage({ section, page }: { section: string; page: s
                             }}
                         >
                             <CardHeader>
-                                <CardTitle>Search {data?.section?.title}</CardTitle>
+                                <CardTitle>{t('search')} {data?.section?.title}</CardTitle>
                                 {/*<CardDescription>Search by title</CardDescription>*/}
                             </CardHeader>
                             <CardContent>
                                 <Input
                                     className='border-accent-foreground bg-input'
                                     ref={searchInputRef}
-                                    placeholder={`${capitalizeWords(getString('search'))}...`}
+                                    placeholder={`${capitalizeWords(t('search'))}...`}
                                     defaultValue={q || ''}
                                 />
                             </CardContent>
                             <CardFooter className='border-t px-6 py-4'>
-                                <Button>{capitalizeWords(getString('search'))}</Button>
+                                <Button>{capitalizeWords(t('search'))}</Button>
                             </CardFooter>
                         </form>
                     </Card>
                 ) : null}
-                <ContainerBox title={getString('browse')}>
+                <ContainerBox title={t('browse')}>
                     
                         
                             { data.items && data.items.length > 0 ? (
@@ -83,7 +84,7 @@ export default function BrowsePage({ section, page }: { section: string; page: s
                                 </div>
                             ) : (
                                 <Alert variant='default' className='bg-primary text-primary-foreground my-8'>
-                                    <AlertDescription className='font-bold'>{getString('noItems')}</AlertDescription>
+                                    <AlertDescription className='font-bold'>{t('noItems')}</AlertDescription>
                                 </Alert>
                             )}