create-nextjs-cms 0.8.9 → 0.9.0

package/templates/default/components/EmailPasswordForm.tsx

@@ -1,85 +1,85 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import React from 'react'
-import useModal from '@/hooks/useModal'
-import { useToast } from '@/components/ui/use-toast'
-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: t('error'),
-                body: (
-                    <div className='p-4'>
-                        <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-        onSuccess: (data) => {
-            action()
-            setModal(null)
-            setModalResponse(null)
-            toast({
-                variant: 'success',
-                title: t('success'),
-            })
-        },
-    })
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-        quotaMutation.mutate({
-            email,
-            password: e.currentTarget.password.value,
-            passwordConfirm: e.currentTarget.passwordConfirm.value,
-        })
-    }
-
-    return (
-        <form onSubmit={handleSubmit} className='flex flex-col gap-2'>
-            <div>
-                <label htmlFor='password' className='block text-sm font-medium leading-6 text-foreground'>
-                    {t('newPassword')}
-                </label>
-                <div className=''>
-                    <input
-                        id='password'
-                        name='password'
-                        type='text'
-                        autoComplete='password'
-                        required
-                        className='block w-full 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'
-                    />
-                </div>
-            </div>
-            <div>
-                <label htmlFor='passwordConfirm' className='block text-sm font-medium leading-6 text-foreground'>
-                    {t('confirmNewPassword')}
-                </label>
-                <div className=''>
-                    <input
-                        id='passwordConfirm'
-                        name='passwordConfirm'
-                        type='text'
-                        autoComplete='passwordConfirm'
-                        required
-                        className='block w-full 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'
-                    />
-                </div>
-            </div>
-            <div className='mt-4'>
-                <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
-                    {t('changePassword')}
-                </button>
-            </div>
-        </form>
-    )
-}
+import { useI18n } from 'nextjs-cms/translations/client'
+import React from 'react'
+import useModal from '@/hooks/useModal'
+import { useToast } from '@/components/ui/use-toast'
+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: t('error'),
+                body: (
+                    <div className='p-4'>
+                        <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+        onSuccess: (data) => {
+            action()
+            setModal(null)
+            setModalResponse(null)
+            toast({
+                variant: 'success',
+                title: t('success'),
+            })
+        },
+    })
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        quotaMutation.mutate({
+            email,
+            password: e.currentTarget.password.value,
+            passwordConfirm: e.currentTarget.passwordConfirm.value,
+        })
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className='flex flex-col gap-2'>
+            <div>
+                <label htmlFor='password' className='block text-sm font-medium leading-6 text-foreground'>
+                    {t('newPassword')}
+                </label>
+                <div className=''>
+                    <input
+                        id='password'
+                        name='password'
+                        type='text'
+                        autoComplete='password'
+                        required
+                        className='block w-full 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'
+                    />
+                </div>
+            </div>
+            <div>
+                <label htmlFor='passwordConfirm' className='block text-sm font-medium leading-6 text-foreground'>
+                    {t('confirmNewPassword')}
+                </label>
+                <div className=''>
+                    <input
+                        id='passwordConfirm'
+                        name='passwordConfirm'
+                        type='text'
+                        autoComplete='passwordConfirm'
+                        required
+                        className='block w-full 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'
+                    />
+                </div>
+            </div>
+            <div className='mt-4'>
+                <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
+                    {t('changePassword')}
+                </button>
+            </div>
+        </form>
+    )
+}

package/templates/default/components/EmailQuotaForm.tsx

@@ -1,73 +1,73 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import React from 'react'
-import useModal from '@/hooks/useModal'
-import { Badge } from '@/components/ui/badge'
-import { useToast } from '@/components/ui/use-toast'
-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: t('error'),
-                body: (
-                    <div className='p-4'>
-                        <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-        onSuccess: (data) => {
-            action()
-            setModal(null)
-            setModalResponse(null)
-            toast({
-                variant: 'success',
-                title: t('success'),
-            })
-        },
-    })
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-        quotaMutation.mutate({
-            email,
-            quota: e.currentTarget.quota.value,
-        })
-    }
-
-    return (
-        <form onSubmit={handleSubmit} className='flex flex-col gap-2'>
-            <div>
-                <label htmlFor='quota' className='block text-sm font-medium leading-6 text-foreground'>
-                    {t('emailQuota')}
-                </label>
-                <div className=''>
-                    <input
-                        id='quota'
-                        name='quota'
-                        type='number'
-                        autoComplete='quota'
-                        required
-                        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 = {t('unlimited')}
-                    </Badge>
-                </div>
-            </div>
-            <div className='mt-4'>
-                <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
-                    {t('updateQuota')}
-                </button>
-            </div>
-        </form>
-    )
-}
+import { useI18n } from 'nextjs-cms/translations/client'
+import React from 'react'
+import useModal from '@/hooks/useModal'
+import { Badge } from '@/components/ui/badge'
+import { useToast } from '@/components/ui/use-toast'
+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: t('error'),
+                body: (
+                    <div className='p-4'>
+                        <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+        onSuccess: (data) => {
+            action()
+            setModal(null)
+            setModalResponse(null)
+            toast({
+                variant: 'success',
+                title: t('success'),
+            })
+        },
+    })
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        quotaMutation.mutate({
+            email,
+            quota: e.currentTarget.quota.value,
+        })
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className='flex flex-col gap-2'>
+            <div>
+                <label htmlFor='quota' className='block text-sm font-medium leading-6 text-foreground'>
+                    {t('emailQuota')}
+                </label>
+                <div className=''>
+                    <input
+                        id='quota'
+                        name='quota'
+                        type='number'
+                        autoComplete='quota'
+                        required
+                        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 = {t('unlimited')}
+                    </Badge>
+                </div>
+            </div>
+            <div className='mt-4'>
+                <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
+                    {t('updateQuota')}
+                </button>
+            </div>
+        </form>
+    )
+}

package/templates/default/components/EmailsPage.tsx

@@ -1,49 +1,49 @@
-'use client'
-
-import  { useEffect } from 'react'
-import { EmailItem } from 'nextjs-cms/core/types'
-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()
-
-    useEffect(() => {
-        return () => {
-            controller.abort()
-        }
-    }, [])
-
-    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'>{t('emailAccounts')}</h1>
-            </div>
-
-            <div className='flex flex-col gap-2 p-4'>
-                <ContainerBox title={t('createNewEmailAccount')}>
-                    <NewEmailForm action={() => refetch()} />
-                </ContainerBox>
-
-                {isLoading && <div>{t('loading')}</div>}
-                {data && data.emails && data.emails.length > 0 && (
-                    <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} />
-                            ))}
-                        </div>
-                    </ContainerBox>
-                )}
-            </div>
-        </div>
-    )
-}
-
-export default EmailsPage
+'use client'
+
+import  { useEffect } from 'react'
+import { EmailItem } from 'nextjs-cms/core/types'
+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()
+
+    useEffect(() => {
+        return () => {
+            controller.abort()
+        }
+    }, [])
+
+    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'>{t('emailAccounts')}</h1>
+            </div>
+
+            <div className='flex flex-col gap-2 p-4'>
+                <ContainerBox title={t('createNewEmailAccount')}>
+                    <NewEmailForm action={() => refetch()} />
+                </ContainerBox>
+
+                {isLoading && <div>{t('loading')}</div>}
+                {data && data.emails && data.emails.length > 0 && (
+                    <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} />
+                            ))}
+                        </div>
+                    </ContainerBox>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default EmailsPage

package/templates/default/components/ErrorComponent.tsx

@@ -1,17 +1,17 @@
-import { Alert, AlertDescription } from './ui/alert'
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
-
-export default function ErrorComponent({ message }: { message: string }) {
-    return (
-        <div className='px-4'>
-            <Alert variant='info' className='my-8'>
-                <AlertDescription className='text-md font-bold'>
-                    <div className='flex items-center gap-1.5'>
-                        <ExclamationTriangleIcon className='size-5' /> {message}
-                    </div>
-                </AlertDescription>
-            </Alert>
-        </div>
-    )
-    
+import { Alert, AlertDescription } from './ui/alert'
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
+
+export default function ErrorComponent({ message }: { message: string }) {
+    return (
+        <div className='px-4'>
+            <Alert variant='info' className='my-8'>
+                <AlertDescription className='text-md font-bold'>
+                    <div className='flex items-center gap-1.5'>
+                        <ExclamationTriangleIcon className='size-5' /> {message}
+                    </div>
+                </AlertDescription>
+            </Alert>
+        </div>
+    )
+    
 }

package/templates/default/components/GalleryPhoto.tsx

@@ -1,93 +1,93 @@
-import { PhotoGalleryItem } from 'nextjs-cms/core/types'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { MinusIcon } from '@radix-ui/react-icons'
-import ProtectedImage from '@/components/ProtectedImage'
-import useModal from '@/hooks/useModal'
-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: t('deleteGalleryPhoto'),
-                description: error.message,
-            })
-        },
-
-        onSuccess: (data) => {
-            setModal(null)
-            setModalResponse(null)
-            toast({
-                variant: 'success',
-                title: t('galleryPhotoDeleted'),
-            })
-            action()
-        },
-    })
-    const { toast } = useToast()
-    const handlePhotoDelete = async () => {
-        deleteMutation.mutate({
-            sectionName: sectionName,
-            photoName: item.photo,
-            referenceId: item.referenceId,
-        })
-    }
-    return (
-        <div className='relative'>
-            {/* Delete Button */}
-            <button
-                type='button'
-                className='absolute -end-2 -top-2 z-10 h-6 w-6 rounded-full bg-red-500 p-1'
-                onClick={() => {
-                    setModal({
-                        title: t('deleteGalleryPhoto'),
-                        body: (
-                            <div className='p-4'>
-                                <div className='flex flex-col gap-4'>
-                                    <div>{t('deleteGalleryPhotoText')}</div>
-                                    <div className='flex gap-2'>
-                                        <button
-                                            className='rounded bg-green-600 px-2 py-1 text-white'
-                                            onClick={handlePhotoDelete}
-                                        >
-                                            Yes
-                                        </button>
-                                        <button
-                                            className='rounded bg-red-800 px-2 py-1 text-white'
-                                            onClick={() => {
-                                                setModal(null)
-                                            }}
-                                        >
-                                            No
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        ),
-                        headerColor: 'bg-red-700',
-                        titleColor: 'text-white',
-                        lang: 'en',
-                    })
-                }}
-            >
-                <MinusIcon className='text-white' />
-            </button>
-            <ProtectedImage
-                section={sectionName}
-                photo={item.photo}
-                isThumb={true}
-                alt={item.photo}
-                height={150}
-                width={150}
-                // fill={true}
-                className='mb-4 rounded p-1 ring-3 ring-gray-400'
-            />
-        </div>
-    )
-}
-
-export default GalleryPhoto
+import { PhotoGalleryItem } from 'nextjs-cms/core/types'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { MinusIcon } from '@radix-ui/react-icons'
+import ProtectedImage from '@/components/ProtectedImage'
+import useModal from '@/hooks/useModal'
+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: t('deleteGalleryPhoto'),
+                description: error.message,
+            })
+        },
+
+        onSuccess: (data) => {
+            setModal(null)
+            setModalResponse(null)
+            toast({
+                variant: 'success',
+                title: t('galleryPhotoDeleted'),
+            })
+            action()
+        },
+    })
+    const { toast } = useToast()
+    const handlePhotoDelete = async () => {
+        deleteMutation.mutate({
+            sectionName: sectionName,
+            photoName: item.photo,
+            referenceId: item.referenceId,
+        })
+    }
+    return (
+        <div className='relative'>
+            {/* Delete Button */}
+            <button
+                type='button'
+                className='absolute -end-2 -top-2 z-10 h-6 w-6 rounded-full bg-red-500 p-1'
+                onClick={() => {
+                    setModal({
+                        title: t('deleteGalleryPhoto'),
+                        body: (
+                            <div className='p-4'>
+                                <div className='flex flex-col gap-4'>
+                                    <div>{t('deleteGalleryPhotoText')}</div>
+                                    <div className='flex gap-2'>
+                                        <button
+                                            className='rounded bg-green-600 px-2 py-1 text-white'
+                                            onClick={handlePhotoDelete}
+                                        >
+                                            Yes
+                                        </button>
+                                        <button
+                                            className='rounded bg-red-800 px-2 py-1 text-white'
+                                            onClick={() => {
+                                                setModal(null)
+                                            }}
+                                        >
+                                            No
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        ),
+                        headerColor: 'bg-red-700',
+                        titleColor: 'text-white',
+                        lang: 'en',
+                    })
+                }}
+            >
+                <MinusIcon className='text-white' />
+            </button>
+            <ProtectedImage
+                section={sectionName}
+                photo={item.photo}
+                isThumb={true}
+                alt={item.photo}
+                height={150}
+                width={150}
+                // fill={true}
+                className='mb-4 rounded p-1 ring-3 ring-gray-400'
+            />
+        </div>
+    )
+}
+
+export default GalleryPhoto