create-nextjs-cms 0.9.6 → 0.9.8

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

package/templates/default/components/InfoCard.tsx

@@ -1,93 +1,93 @@
-'use client'
-
-import Link from 'next/link'
-import { CheckCircle, OctagonIcon, TriangleIcon } from 'lucide-react'
-
-type result = {
-    key: string
-    title: string
-    status?: boolean
-    icon?: boolean
-    action?: {
-        text: string
-        link: string
-    }
-}
-
-export default function InfoCard({ result, className }: { result: result; className?: string }) {
-    let bgColor
-    let iconBgColor
-    let textColor
-    let buttonColor
-    switch (result.key) {
-        case 'success':
-            bgColor = 'bg-green-100'
-            iconBgColor = 'bg-green-200'
-            textColor = 'text-green-800'
-            buttonColor = 'bg-green-500 hover:bg-green-400'
-
-            break
-        case 'danger':
-            bgColor = 'bg-rose-100'
-            iconBgColor = 'bg-rose-200'
-            textColor = 'text-red-800'
-            buttonColor = 'bg-rose-600 hover:bg-red-500'
-
-            break
-        case 'warning':
-            bgColor = 'bg-orange-100'
-            iconBgColor = 'bg-orange-200'
-            textColor = 'text-orange-800'
-            buttonColor = 'bg-orange-500 hover:bg-orange-400'
-            break
-        case 'info':
-            bgColor = 'bg-sky-100'
-            iconBgColor = 'bg-sky-200'
-            textColor = 'text-blue-900'
-            buttonColor = 'bg-blue-500 hover:bg-blue-400'
-            break
-        default:
-            break
-    }
-    return (
-        <div className={className}>
-            <div className='col-span-full relative w-full overflow-hidden rounded-lg bg-white text-left border border-sky-700 transition-all'>
-                <div className=''>
-                    <div className=''>
-                        <div className={`w-full ${bgColor}`}>
-                            <div className={`flex items-center text-md font-semibold ${textColor} py-1 px-2`}>
-                                {result.icon && (
-                                    <div
-                                        className={` flex h-10 w-10 p-1 shrink-0 items-center justify-center rounded-full ${iconBgColor}`}
-                                    >
-                                        {result.key === 'success' ? (
-                                            <CheckCircle />
-                                        ) : result.key === 'danger' ? (
-                                            <OctagonIcon />
-                                        ) : result.key === 'warning' ? (
-                                            <TriangleIcon />
-                                        ) : (
-                                            <OctagonIcon />
-                                        )}
-                                    </div>
-                                )}
-                                <div className='ps-2 py-2'>
-                                    <div dangerouslySetInnerHTML={{ __html: result.title }}></div>
-                                    {result.action && (
-                                        <Link
-                                            href={result.action.link}
-                                            type='link'
-                                            className={`justify-center text-sm font-bold ms-2 text-blue-600`}
-                                        >
-                                            {result.action.text}
-                                        </Link>
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
+'use client'
+
+import Link from 'next/link'
+import { CheckCircle, OctagonIcon, TriangleIcon } from 'lucide-react'
+
+type result = {
+    key: string
+    title: string
+    status?: boolean
+    icon?: boolean
+    action?: {
+        text: string
+        link: string
+    }
+}
+
+export default function InfoCard({ result, className }: { result: result; className?: string }) {
+    let bgColor
+    let iconBgColor
+    let textColor
+    let buttonColor
+    switch (result.key) {
+        case 'success':
+            bgColor = 'bg-green-100'
+            iconBgColor = 'bg-green-200'
+            textColor = 'text-green-800'
+            buttonColor = 'bg-green-500 hover:bg-green-400'
+
+            break
+        case 'danger':
+            bgColor = 'bg-rose-100'
+            iconBgColor = 'bg-rose-200'
+            textColor = 'text-red-800'
+            buttonColor = 'bg-rose-600 hover:bg-red-500'
+
+            break
+        case 'warning':
+            bgColor = 'bg-orange-100'
+            iconBgColor = 'bg-orange-200'
+            textColor = 'text-orange-800'
+            buttonColor = 'bg-orange-500 hover:bg-orange-400'
+            break
+        case 'info':
+            bgColor = 'bg-sky-100'
+            iconBgColor = 'bg-sky-200'
+            textColor = 'text-blue-900'
+            buttonColor = 'bg-blue-500 hover:bg-blue-400'
+            break
+        default:
+            break
+    }
+    return (
+        <div className={className}>
+            <div className='col-span-full relative w-full overflow-hidden rounded-lg bg-white text-left border border-sky-700 transition-all'>
+                <div className=''>
+                    <div className=''>
+                        <div className={`w-full ${bgColor}`}>
+                            <div className={`flex items-center text-md font-semibold ${textColor} py-1 px-2`}>
+                                {result.icon && (
+                                    <div
+                                        className={` flex h-10 w-10 p-1 shrink-0 items-center justify-center rounded-full ${iconBgColor}`}
+                                    >
+                                        {result.key === 'success' ? (
+                                            <CheckCircle />
+                                        ) : result.key === 'danger' ? (
+                                            <OctagonIcon />
+                                        ) : result.key === 'warning' ? (
+                                            <TriangleIcon />
+                                        ) : (
+                                            <OctagonIcon />
+                                        )}
+                                    </div>
+                                )}
+                                <div className='ps-2 py-2'>
+                                    <div dangerouslySetInnerHTML={{ __html: result.title }}></div>
+                                    {result.action && (
+                                        <Link
+                                            href={result.action.link}
+                                            type='link'
+                                            className={`justify-center text-sm font-bold ms-2 text-blue-600`}
+                                        >
+                                            {result.action.text}
+                                        </Link>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}