create-nextjs-cms 0.5.92 → 0.5.94

package/templates/default/components/Dropzone.tsx

@@ -2,7 +2,7 @@ import React, { CSSProperties, forwardRef, Ref, useEffect, useImperativeHandle,
 import { DropEvent, FileRejection, useDropzone } from 'react-dropzone'
 import { DropzoneFile } from 'nextjs-cms/core/types'
 import ContainerBox from '@/components/ContainerBox'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { MinusIcon } from '@radix-ui/react-icons'
 import { useToast } from '@/components/ui/use-toast'
 
@@ -36,6 +36,7 @@ export interface DropzoneHandles {
 }
 
 function Dropzone(props: any, ref: Ref<DropzoneHandles>) {
+    const t = useI18n()
     const acceptedFileTypes = {
         'image/png': ['.png'],
         'image/jpeg': ['.jpg', '.jpeg'],
@@ -62,17 +63,17 @@ function Dropzone(props: any, ref: Ref<DropzoneHandles>) {
         onDropRejected: (rejectedFiles: FileRejection[], e: DropEvent) => {
             toast({
                 variant: 'destructive',
-                title: getString('delete_gallery_photo'),
+                title: t('deleteGalleryPhoto'),
                 description: rejectedFiles[0]?.errors[0]?.message
                     ? rejectedFiles[0].errors[0].message
-                    : getString('error'),
+                    : t('error'),
             })
         },
 
         onError: (error: any) => {
             toast({
                 variant: 'destructive',
-                title: getString('delete_gallery_photo'),
+                title: t('deleteGalleryPhoto'),
                 description: error.displayName,
             })
         },
@@ -131,16 +132,16 @@ function Dropzone(props: any, ref: Ref<DropzoneHandles>) {
     }, [])
 
     return (
-        <ContainerBox title={getString('uploadPhotosToGallery')}>
+        <ContainerBox title={t('uploadPhotosToGallery')}>
             <section className='container mt-4 rounded-2xl border-4 border-dashed border-gray-400 bg-accent py-8'>
                 <div {...getRootProps({ className: 'dropzone' })}>
                     <input {...getInputProps()} />
                     <div className='flex flex-col items-center justify-center'>
                         <div className='p-4 text-xl font-semibold text-card-foreground'>
-                            {getString('dropzoneText')}
+                            {t('dropzoneText')}
                         </div>
                         <div className='text-muted-foreground'>
-                            Accepts: {Object.values(acceptedFileTypes).flat().join(', ')}
+                            {t('accepts')}: {Object.values(acceptedFileTypes).flat().join(', ')}
                         </div>
                     </div>
                 </div>

package/templates/default/components/EmailCard.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import React from 'react'
 import { EmailItem } from 'nextjs-cms/core/types'
 import useModal from '@/hooks/useModal'
@@ -11,6 +11,7 @@ import EmailPasswordForm from '@/components/EmailPasswordForm'
 import { trpc } from '@/app/_trpc/client'
 
 export default function EmailCard({ email, action }: { email: EmailItem; action: any }) {
+    const t = useI18n()
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const { toast } = useToast()
 
@@ -29,7 +30,7 @@ export default function EmailCard({ email, action }: { email: EmailItem; action:
             setModalResponse(null)
             toast({
                 variant: 'success',
-                title: getString('deleteEmailAccount'),
+                title: t('deleteEmailAccount'),
                 description: data.message,
             })
         },
@@ -61,7 +62,7 @@ export default function EmailCard({ email, action }: { email: EmailItem; action:
                     variant='default'
                     onClick={() => {
                         setModal({
-                            title: getString('emailQuota'),
+                            title: t('emailQuota'),
                             body: (
                                 <div className='p-4'>
                                     <EmailQuotaForm email={email.user} action={() => action()} />
@@ -73,14 +74,14 @@ export default function EmailCard({ email, action }: { email: EmailItem; action:
                         })
                     }}
                 >
-                    {getString('quota')}
+                    {t('quota')}
                 </Button>
                 <Button
                     size='sm'
                     variant='default'
                     onClick={() => {
                         setModal({
-                            title: getString('change_password'),
+                            title: t('changePassword'),
                             body: (
                                 <div className='p-4'>
                                     <EmailPasswordForm email={email.user} action={() => action()} />
@@ -92,24 +93,24 @@ export default function EmailCard({ email, action }: { email: EmailItem; action:
                         })
                     }}
                 >
-                    {getString('password')}
+                    {t('password')}
                 </Button>
                 <Button
                     size='sm'
                     variant='destructive'
                     onClick={() => {
                         setModal({
-                            title: getString('delete'),
+                            title: t('delete'),
                             body: (
                                 <div className='p-4'>
                                     <div className='flex flex-col gap-4'>
-                                        <div>{getString('deleteEmailText')}</div>
+                                        <div>{t('deleteEmailText')}</div>
                                         <div className='flex gap-2'>
                                             <button
                                                 className='rounded bg-green-600 px-2 py-1 text-white'
                                                 onClick={deleteEmail}
                                             >
-                                                Yes
+                                                {t('yes')}
                                             </button>
                                             <button
                                                 className='rounded bg-red-800 px-2 py-1 text-white'
@@ -117,7 +118,7 @@ export default function EmailCard({ email, action }: { email: EmailItem; action:
                                                     setModal(null)
                                                 }}
                                             >
-                                                No
+                                                {t('no')}
                                             </button>
                                         </div>
                                     </div>
@@ -129,7 +130,7 @@ export default function EmailCard({ email, action }: { email: EmailItem; action:
                         })
                     }}
                 >
-                    {getString('delete')}
+                    {t('delete')}
                 </Button>
             </CardFooter>
         </Card>

package/templates/default/components/EmailPasswordForm.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 { useToast } from '@/components/ui/use-toast'
@@ -6,13 +6,14 @@ import InfoCard from '@/components/InfoCard'
 import { trpc } from '@/app/_trpc/client'
 
 export default function EmailPasswordForm({ email, action }: { email: string; action: any }) {
+    const t = useI18n()
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
 
     const { toast } = useToast()
     const quotaMutation = trpc.cpanelEmails.passwordChange.useMutation({
         onError: (error) => {
             setModal({
-                title: getString('error'),
+                title: t('error'),
                 body: (
                     <div className='p-4'>
                         <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
@@ -29,7 +30,7 @@ export default function EmailPasswordForm({ email, action }: { email: string; ac
             setModalResponse(null)
             toast({
                 variant: 'success',
-                title: getString('success'),
+                title: t('success'),
             })
         },
     })
@@ -46,7 +47,7 @@ export default function EmailPasswordForm({ email, action }: { email: string; ac
         <form onSubmit={handleSubmit} className='flex flex-col gap-2'>
             <div>
                 <label htmlFor='password' className='block text-sm font-medium leading-6 text-foreground'>
-                    {getString('new_password')}
+                    {t('newPassword')}
                 </label>
                 <div className=''>
                     <input
@@ -61,7 +62,7 @@ export default function EmailPasswordForm({ email, action }: { email: string; ac
             </div>
             <div>
                 <label htmlFor='passwordConfirm' className='block text-sm font-medium leading-6 text-foreground'>
-                    {getString('confirm_new_password')}
+                    {t('confirmNewPassword')}
                 </label>
                 <div className=''>
                     <input
@@ -76,7 +77,7 @@ export default function EmailPasswordForm({ email, action }: { email: string; ac
             </div>
             <div className='mt-4'>
                 <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
-                    {getString('change_password')}
+                    {t('changePassword')}
                 </button>
             </div>
         </form>

package/templates/default/components/EmailQuotaForm.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 { Badge } from '@/components/ui/badge'
@@ -7,13 +7,14 @@ import InfoCard from '@/components/InfoCard'
 import { trpc } from '@/app/_trpc/client'
 
 export default function EmailQuotaForm({ email, action }: { email: string; action: any }) {
+    const t = useI18n()
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const { toast } = useToast()
 
     const quotaMutation = trpc.cpanelEmails.quotaChange.useMutation({
         onError: (error) => {
             setModal({
-                title: getString('error'),
+                title: t('error'),
                 body: (
                     <div className='p-4'>
                         <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
@@ -30,7 +31,7 @@ export default function EmailQuotaForm({ email, action }: { email: string; actio
             setModalResponse(null)
             toast({
                 variant: 'success',
-                title: getString('success'),
+                title: t('success'),
             })
         },
     })
@@ -46,7 +47,7 @@ export default function EmailQuotaForm({ email, action }: { email: string; actio
         <form onSubmit={handleSubmit} className='flex flex-col gap-2'>
             <div>
                 <label htmlFor='quota' className='block text-sm font-medium leading-6 text-foreground'>
-                    {getString('emailQuota')}
+                    {t('emailQuota')}
                 </label>
                 <div className=''>
                     <input
@@ -58,13 +59,13 @@ export default function EmailQuotaForm({ email, action }: { email: string; actio
                         className='block rounded-md border-0 bg-input p-2.5 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
                     />
                     <Badge className='rounded-sm border-muted-foreground text-muted-foreground' variant='secondary'>
-                        0 = {getString('unlimited')}
+                        0 = {t('unlimited')}
                     </Badge>
                 </div>
             </div>
             <div className='mt-4'>
                 <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
-                    {getString('update_quota')}
+                    {t('updateQuota')}
                 </button>
             </div>
         </form>

package/templates/default/components/EmailsPage.tsx

@@ -2,13 +2,14 @@
 
 import  { useEffect } from 'react'
 import { EmailItem } from 'nextjs-cms/core/types'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import ContainerBox from '@/components/ContainerBox'
 import NewEmailForm from '@/components/NewEmailForm'
 import EmailCard from '@/components/EmailCard'
 import { trpc } from '@/app/_trpc/client'
 
 const EmailsPage = () => {
+    const t = useI18n()
     const controller = new AbortController()
 
     const { isLoading, isError, data, error, refetch } = trpc.cpanelEmails.getEmails.useQuery()
@@ -22,17 +23,17 @@ const EmailsPage = () => {
     return (
         <div className='bg-white dark:bg-slate-900'>
             <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('email_accounts')}</h1>
+                <h1 className='text-3xl'>{t('emailAccounts')}</h1>
             </div>
 
             <div className='flex flex-col gap-2 p-4'>
-                <ContainerBox title={getString('create_new_email_account')}>
+                <ContainerBox title={t('createNewEmailAccount')}>
                     <NewEmailForm action={() => refetch()} />
                 </ContainerBox>
 
-                {isLoading && <div>Loading...</div>}
+                {isLoading && <div>{t('loading')}</div>}
                 {data && data.emails && data.emails.length > 0 && (
-                    <ContainerBox title={getString('admins_list')}>
+                    <ContainerBox title={t('emailAccountsList')}>
                         <div className='mt-2 grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>
                             {data.emails.map((email: EmailItem) => (
                                 <EmailCard key={email.user} action={() => refetch()} email={email} />

package/templates/default/components/GalleryPhoto.tsx

@@ -1,5 +1,5 @@
 import { PhotoGalleryItem } from 'nextjs-cms/core/types'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { MinusIcon } from '@radix-ui/react-icons'
 import ProtectedImage from '@/components/ProtectedImage'
 import useModal from '@/hooks/useModal'
@@ -7,12 +7,13 @@ import { useToast } from '@/components/ui/use-toast'
 import { trpc } from '@/app/_trpc/client'
 
 const GalleryPhoto = ({ item, sectionName, action }: { item: PhotoGalleryItem; sectionName: string; action?: any }) => {
+    const t = useI18n()
     const { setModal, setModalResponse } = useModal()
     const deleteMutation = trpc.gallery.deletePhoto.useMutation({
         onError: (error) => {
             toast({
                 variant: 'destructive',
-                title: getString('delete_gallery_photo'),
+                title: t('deleteGalleryPhoto'),
                 description: error.message,
             })
         },
@@ -22,7 +23,7 @@ const GalleryPhoto = ({ item, sectionName, action }: { item: PhotoGalleryItem; s
             setModalResponse(null)
             toast({
                 variant: 'success',
-                title: getString('gallery_photo_deleted'),
+                title: t('galleryPhotoDeleted'),
             })
             action()
         },
@@ -43,11 +44,11 @@ const GalleryPhoto = ({ item, sectionName, action }: { item: PhotoGalleryItem; s
                 className='absolute -end-2 -top-2 z-10 h-6 w-6 rounded-full bg-red-500 p-1'
                 onClick={() => {
                     setModal({
-                        title: getString('delete_gallery_photo'),
+                        title: t('deleteGalleryPhoto'),
                         body: (
                             <div className='p-4'>
                                 <div className='flex flex-col gap-4'>
-                                    <div>{getString('delete_gallery_photo_text')}</div>
+                                    <div>{t('deleteGalleryPhotoText')}</div>
                                     <div className='flex gap-2'>
                                         <button
                                             className='rounded bg-green-600 px-2 py-1 text-white'

package/templates/default/components/ItemEditPage.tsx

@@ -3,7 +3,7 @@
 import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
 import { RefObject, useEffect, useRef, useState } from 'react'
 import { SectionType } from 'nextjs-cms/core/types'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import useModal from '@/hooks/useModal'
 import { AxiosError } from 'axios'
 import InfoCard from '@/components/InfoCard'
@@ -31,6 +31,7 @@ export default function ItemEditPage({
     }[]
     action?: any
 }) {
+    const t = useI18n()
     const [response, setResponse] = useState<any>(null)
     const [progress, setProgress] = useState(0)
     const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
@@ -133,7 +134,7 @@ export default function ItemEditPage({
                             setModal(null)
                             toast({
                                 variant: 'success',
-                                description: getString('itemUpdatedSuccessfully'),
+                                description: t('itemUpdatedSuccessfully'),
                             })
                             if (action) {
                                 await action().then(() => {
@@ -149,7 +150,7 @@ export default function ItemEditPage({
                             setResponse(null)
                             toast({
                                 variant: 'success',
-                                description: getString('itemUpdatedSuccessfully'),
+                                description: t('itemUpdatedSuccessfully'),
                             })
 
                             // Redirect to the edit page
@@ -193,7 +194,7 @@ export default function ItemEditPage({
                     <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
                     <h1 className='pb-4 text-4xl'>{data.section?.title.section}</h1>
                     <span>
-                        /{getString('edit')} {data.section?.title.singular}
+                        /{t('edit')} {data.section?.title.singular}
                     </span>
                 </div>
                 <Form

package/templates/default/components/Layout.tsx

@@ -55,7 +55,7 @@ function Layout({
                         <div
                             className={classNames({
                                 'transition-all duration-100 ease-in-out': true,
-                                'float-right': true,
+                                'float-right rtl:float-left': true,
                                 'w-full md:w-[calc(100%-275px)]': true,
                             })}
                         >

package/templates/default/components/LoadingSpinners.tsx

@@ -59,7 +59,7 @@ const LoadingSpinners = ({ single = false }: { single?: boolean }) => {
                     </div>
                 </>
             )}
-            <span className='sr-only'>Loading...</span>
+            <span className='sr-only'>Loading</span>
         </div>
     )
 }

package/templates/default/components/LogPage.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { trpc } from '@/app/_trpc/client'
 import { Badge } from '@/components/ui/badge'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import ErrorComponent from '@/components/ErrorComponent'
+import { Spinner } from '@/components/ui/spinner'
 
 type LogMetadata = {
     fields?: string[]
@@ -28,34 +30,47 @@ const parseMetadata = (metadata?: string | null): LogMetadata | null => {
 }
 
 export default function LogPage() {
-    const [data] = trpc.logs.list.useSuspenseQuery({
+    const t = useI18n()
+    const { data, isLoading, isError, error } = trpc.logs.list.useQuery({
         limit: 50,
         offset: 0,
     })
 
+    if (isLoading) {
+        return (
+            <div className='flex w-full items-center justify-center p-8'>
+                <Spinner className='size-8' />
+            </div>
+        )
+    }
+
+    if (isError) {
+        return <ErrorComponent message={error?.message || t('noAccessToSection')} />
+    }
+
     const logs = data?.items ?? []
     return (
         <div className='w-full'>
             <div className='text-foreground bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
-                <h1 className='text-3xl'>{getString('logs')}</h1>
+                <h1 className='text-3xl'>{t('logs')}</h1>
             </div>
 
             <div className='flex flex-col gap-4 p-4'>
                 <Table>
                     <TableHeader>
                         <TableRow>
-                            <TableHead>{getString('date')}</TableHead>
-                            <TableHead>{getString('action')}</TableHead>
-                            <TableHead>{getString('admin')}</TableHead>
-                            <TableHead>{getString('section')}</TableHead>
-                            <TableHead>{getString('details')}</TableHead>
+                            <TableHead>{t('date')}</TableHead>
+                            <TableHead>{t('action')}</TableHead>
+                            <TableHead>{t('admin')}</TableHead>
+                            <TableHead>{t('section')}</TableHead>
+                            <TableHead>{t('details')}</TableHead>
                         </TableRow>
                     </TableHeader>
                     <TableBody>
                         {logs.length === 0 ? (
                             <TableRow>
                                 <TableCell colSpan={5} className='text-muted-foreground text-center'>
-                                    {getString('no_data')}
+                                    {t('noData')}
                                 </TableCell>
                             </TableRow>
                         ) : (

package/templates/default/components/Navbar.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import { MoonIcon, SunIcon, BellIcon, HamburgerMenuIcon } from '@radix-ui/react-icons'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { trpc } from '@/app/_trpc/client'
 import ProtectedImage from '@/components/ProtectedImage'
 import { Spinner } from '@/components/ui/spinner'
@@ -39,6 +39,7 @@ const formatTimestamp = (value?: Date | string | null) => {
 }
 
 export default function Navbar(props: Props) {
+    const t = useI18n()
     const { theme, setTheme } = useTheme()
     const session = useSession()
     const { toast } = useToast()
@@ -67,7 +68,7 @@ export default function Navbar(props: Props) {
         } catch (error: any) {
             toast({
                 variant: 'destructive',
-                title: getString('logoutError'),
+                title: t('logoutError'),
                 description: error.message,
             })
         }
@@ -109,7 +110,7 @@ export default function Navbar(props: Props) {
                             </div>*/}
                         </div>
                         <div className=''>
-                            <div className='ml-4 flex items-center md:ml-6'>
+                            <div className='ms-4 flex items-center md:ms-6'>
                                 <div className='flex flex-row items-center gap-3'>
                                     <DropdownMenu onOpenChange={handleNotificationsOpenChange}>
                                         <DropdownMenuTrigger
@@ -125,20 +126,20 @@ export default function Navbar(props: Props) {
                                             alignOffset={-20}
                                             className='w-[400px] max-w-full ring-1 ring-sky-400/80 dark:ring-amber-900'
                                         >
-                                            <DropdownMenuLabel>{getString('notifications')}</DropdownMenuLabel>
+                                            <DropdownMenuLabel>{t('notifications')}</DropdownMenuLabel>
                                             <DropdownMenuSeparator />
                                             <DropdownMenuGroup className='max-h-[320px] overflow-y-auto'>
                                                 {logsQuery.isFetching && logs.length === 0 ? (
                                                     <DropdownMenuItem disabled className='flex items-center gap-2'>
                                                         <Spinner className='size-3' />
-                                                        <span>{getString('loading')}</span>
+                                                        <span>{t('loading')}</span>
                                                     </DropdownMenuItem>
                                                 ) : logsQuery.isError ? (
                                                     <DropdownMenuItem disabled>
-                                                        {getString('server_error')}
+                                                        {logsQuery.error?.message || t('noAccessToSection')}
                                                     </DropdownMenuItem>
                                                 ) : logs.length === 0 ? (
-                                                    <DropdownMenuItem disabled>{getString('no_data')}</DropdownMenuItem>
+                                                    <DropdownMenuItem disabled>{t('noData')}</DropdownMenuItem>
                                                 ) : (
                                                     logs.map((log) => {
                                                         const actorLabel = log.actorUsername || log.actorId || ''
@@ -170,7 +171,7 @@ export default function Navbar(props: Props) {
 
                                             <Link href='/log'>
                                                 <DropdownMenuItem className='cursor-pointer'>
-                                                    <span>{getString('seeAll')}</span>
+                                                    <span>{t('seeAll')}</span>
                                                 </DropdownMenuItem>
                                             </Link>
                                         </DropdownMenuContent>
@@ -219,8 +220,8 @@ export default function Navbar(props: Props) {
                                             <DropdownMenuGroup>
                                                 <Link href='/settings'>
                                                     <DropdownMenuItem className='cursor-pointer'>
-                                                        <Settings className='mr-2 h-4 w-4' />
-                                                        <span>{getString('accountSettings')}</span>
+                                                        <Settings className='me-2 h-4 w-4' />
+                                                        <span>{t('accountSettings')}</span>
                                                         <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
                                                     </DropdownMenuItem>
                                                 </Link>
@@ -228,8 +229,8 @@ export default function Navbar(props: Props) {
                                             <DropdownMenuSeparator />
 
                                             <DropdownMenuItem className='cursor-pointer' onClick={handleLogout}>
-                                                <LogOut className='mr-2 h-4 w-4' />
-                                                <span>{getString('logout')}</span>
+                                                <LogOut className='me-2 h-4 w-4' />
+                                                <span>{t('logout')}</span>
                                                 <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
                                             </DropdownMenuItem>
                                         </DropdownMenuContent>