create-nextjs-cms 0.7.0 → 0.7.2

package/templates/default/components/Modal.tsx

@@ -1,166 +1,166 @@
-'use client'
-
-import { Suspense, useEffect, useRef, useState } from 'react'
-import useModal from '@/hooks/useModal'
-import classNames from 'classnames'
-import { X, Loader2 } from 'lucide-react'
-
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/custom-dialog'
-
-function ModalLoadingFallback() {
-    return (
-        <div className='flex min-h-[200px] items-center justify-center p-8'>
-            <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
-        </div>
-    )
-}
-
-function Modal() {
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
-    const [open, setOpen] = useState(false)
-
-    const handleClose = () => {
-        setOpen(false)
-        // Close after 100ms
-        setTimeout(() => {
-            setModal(null)
-        }, 200)
-    }
-
-    const cancelButtonRef = useRef(null)
-
-    useEffect(() => {
-        if (!modal) {
-            setModalResponse(null)
-        } else {
-            setOpen(true)
-        }
-    }, [modal])
-
-    if (!modal) return null
-
-    return (
-        <Dialog open={open} onOpenChange={handleClose}>
-            <DialogContent
-                showCloseButton={false}
-                onOpenAutoFocus={(e) => e.preventDefault()}
-                onInteractOutside={(e) => e.preventDefault()}
-                onPointerDownOutside={(e) => e.preventDefault()}
-                className={classNames({
-                    'bg-background w-full rounded-lg p-0 text-start': true,
-                    'max-w-lg': modal?.size === 'sm' || modal?.size === undefined,
-                    'max-w-2xl': modal?.size === 'md',
-                    'max-w-4xl': modal?.size === 'lg',
-                    'max-w-6xl': modal?.size === 'xl',
-                })}
-            >
-                <DialogHeader>
-                    <DialogTitle
-                        className={`flex items-center rounded-t-lg text-xl leading-6 font-semibold ${modal?.titleColor} p-6 pt-5 pb-4 md:pe-20 ${modal?.headerColor}`}
-                    >
-                        <div>{modal?.title || ''}</div>
-                        <X
-                            className={`absolute end-5 size-6 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
-                            onClick={handleClose}
-                            ref={cancelButtonRef}
-                        />
-                    </DialogTitle>
-                </DialogHeader>
-                <div className='max-h-[calc(90vh-120px)] min-h-0 flex-1 overflow-y-auto'>
-                    <div className='flex flex-col gap-1'>
-                        <div className='w-full overflow-hidden'>
-                            <div className='flex w-full flex-col font-semibold'>
-                                <div className='text-foreground w-full'>
-                                    <Suspense fallback={<ModalLoadingFallback />}>
-                                        {modal?.body}
-                                    </Suspense>
-                                </div>
-                                <div className='w-full'>
-                                    {modalResponse && <div className={`w-full p-3`}>{modalResponse.message}</div>}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </DialogContent>
-        </Dialog>
-    )
-
-    /*
-    return (
-        <Transition.Root show={modal !== null} as={Fragment}>
-            <Dialog as='div' className='relative z-50' initialFocus={cancelButtonRef} onClose={handleClose}>
-                <Transition.Child
-                    as={Fragment}
-                    enter='ease-out duration-300'
-                    enterFrom='opacity-0'
-                    enterTo='opacity-100'
-                    leave='ease-in duration-200'
-                    leaveFrom='opacity-100'
-                    leaveTo='opacity-0'
-                >
-                    <div className='fixed inset-0 bg-gray-500/50 backdrop-blur-md transition-opacity' />
-                </Transition.Child>
-
-                <div className='fixed inset-0 z-10 overflow-y-auto'>
-                    <div className='flex min-h-full items-end justify-center p-4 text-start sm:items-start sm:p-0'>
-                        <Transition.Child
-                            as={Fragment}
-                            enter='ease-out duration-300'
-                            enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-                            enterTo='opacity-100 translate-y-0 sm:scale-100'
-                            leave='ease-in duration-200'
-                            leaveFrom='opacity-100 translate-y-0 sm:scale-100'
-                            leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-                        >
-                            <Dialog.Panel
-                                className={classNames({
-                                    'bg-background relative w-full rounded-lg text-start shadow-xl transition-all sm:my-8':
-                                        true,
-                                    'max-w-lg': modal?.size === 'sm' || modal?.size === undefined,
-                                    'max-w-2xl': modal?.size === 'md',
-                                    'max-w-4xl': modal?.size === 'lg',
-                                    'max-w-6xl': modal?.size === 'xl',
-                                })}
-                            >
-                                <div className='bg-background rounded-lg'>
-                                    {modal && (
-                                        <div className='flex flex-col gap-1'>
-                                            <div className='w-full overflow-hidden rounded'>
-                                                <div
-                                                    className={`flex items-center rounded-t-lg text-xl leading-6 font-semibold ${modal.titleColor} p-6 pt-5 pb-4 md:pe-20 ${modal.headerColor}`}
-                                                >
-                                                    <Dialog.Title as='h3' className='pe-5'>
-                                                        {modal.title}
-                                                    </Dialog.Title>
-                                                    <X
-                                                        className={`absolute ${
-                                                            modal.lang === 'ar' ? 'left-5' : 'right-5'
-                                                        } hidden h-7 w-7 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
-                                                        onClick={handleClose}
-                                                        ref={cancelButtonRef}
-                                                    />
-                                                </div>
-                                                <div className='flex w-full flex-col font-semibold'>
-                                                    <div className='text-foreground w-full'>{modal.body}</div>
-                                                    <div className='w-full'>
-                                                        {modalResponse && (
-                                                            <div className={`w-full p-3`}>{modalResponse.message}</div>
-                                                        )}
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    )}
-                                </div>
-                            </Dialog.Panel>
-                        </Transition.Child>
-                    </div>
-                </div>
-            </Dialog>
-        </Transition.Root>
-    )
-    */
-}
-
-export default Modal
+'use client'
+
+import { Suspense, useEffect, useRef, useState } from 'react'
+import useModal from '@/hooks/useModal'
+import classNames from 'classnames'
+import { X, Loader2 } from 'lucide-react'
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/custom-dialog'
+
+function ModalLoadingFallback() {
+    return (
+        <div className='flex min-h-[200px] items-center justify-center p-8'>
+            <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
+        </div>
+    )
+}
+
+function Modal() {
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const [open, setOpen] = useState(false)
+
+    const handleClose = () => {
+        setOpen(false)
+        // Close after 100ms
+        setTimeout(() => {
+            setModal(null)
+        }, 200)
+    }
+
+    const cancelButtonRef = useRef(null)
+
+    useEffect(() => {
+        if (!modal) {
+            setModalResponse(null)
+        } else {
+            setOpen(true)
+        }
+    }, [modal])
+
+    if (!modal) return null
+
+    return (
+        <Dialog open={open} onOpenChange={handleClose}>
+            <DialogContent
+                showCloseButton={false}
+                onOpenAutoFocus={(e) => e.preventDefault()}
+                onInteractOutside={(e) => e.preventDefault()}
+                onPointerDownOutside={(e) => e.preventDefault()}
+                className={classNames({
+                    'bg-background w-full rounded-lg p-0 text-start': true,
+                    'max-w-lg': modal?.size === 'sm' || modal?.size === undefined,
+                    'max-w-2xl': modal?.size === 'md',
+                    'max-w-4xl': modal?.size === 'lg',
+                    'max-w-6xl': modal?.size === 'xl',
+                })}
+            >
+                <DialogHeader>
+                    <DialogTitle
+                        className={`flex items-center rounded-t-lg text-xl leading-6 font-semibold ${modal?.titleColor} p-6 pt-5 pb-4 md:pe-20 ${modal?.headerColor}`}
+                    >
+                        <div>{modal?.title || ''}</div>
+                        <X
+                            className={`absolute end-5 size-6 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
+                            onClick={handleClose}
+                            ref={cancelButtonRef}
+                        />
+                    </DialogTitle>
+                </DialogHeader>
+                <div className='max-h-[calc(90vh-120px)] min-h-0 flex-1 overflow-y-auto'>
+                    <div className='flex flex-col gap-1'>
+                        <div className='w-full overflow-hidden'>
+                            <div className='flex w-full flex-col font-semibold'>
+                                <div className='text-foreground w-full'>
+                                    <Suspense fallback={<ModalLoadingFallback />}>
+                                        {modal?.body}
+                                    </Suspense>
+                                </div>
+                                <div className='w-full'>
+                                    {modalResponse && <div className={`w-full p-3`}>{modalResponse.message}</div>}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+
+    /*
+    return (
+        <Transition.Root show={modal !== null} as={Fragment}>
+            <Dialog as='div' className='relative z-50' initialFocus={cancelButtonRef} onClose={handleClose}>
+                <Transition.Child
+                    as={Fragment}
+                    enter='ease-out duration-300'
+                    enterFrom='opacity-0'
+                    enterTo='opacity-100'
+                    leave='ease-in duration-200'
+                    leaveFrom='opacity-100'
+                    leaveTo='opacity-0'
+                >
+                    <div className='fixed inset-0 bg-gray-500/50 backdrop-blur-md transition-opacity' />
+                </Transition.Child>
+
+                <div className='fixed inset-0 z-10 overflow-y-auto'>
+                    <div className='flex min-h-full items-end justify-center p-4 text-start sm:items-start sm:p-0'>
+                        <Transition.Child
+                            as={Fragment}
+                            enter='ease-out duration-300'
+                            enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+                            enterTo='opacity-100 translate-y-0 sm:scale-100'
+                            leave='ease-in duration-200'
+                            leaveFrom='opacity-100 translate-y-0 sm:scale-100'
+                            leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+                        >
+                            <Dialog.Panel
+                                className={classNames({
+                                    'bg-background relative w-full rounded-lg text-start shadow-xl transition-all sm:my-8':
+                                        true,
+                                    'max-w-lg': modal?.size === 'sm' || modal?.size === undefined,
+                                    'max-w-2xl': modal?.size === 'md',
+                                    'max-w-4xl': modal?.size === 'lg',
+                                    'max-w-6xl': modal?.size === 'xl',
+                                })}
+                            >
+                                <div className='bg-background rounded-lg'>
+                                    {modal && (
+                                        <div className='flex flex-col gap-1'>
+                                            <div className='w-full overflow-hidden rounded'>
+                                                <div
+                                                    className={`flex items-center rounded-t-lg text-xl leading-6 font-semibold ${modal.titleColor} p-6 pt-5 pb-4 md:pe-20 ${modal.headerColor}`}
+                                                >
+                                                    <Dialog.Title as='h3' className='pe-5'>
+                                                        {modal.title}
+                                                    </Dialog.Title>
+                                                    <X
+                                                        className={`absolute ${
+                                                            modal.lang === 'ar' ? 'left-5' : 'right-5'
+                                                        } hidden h-7 w-7 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
+                                                        onClick={handleClose}
+                                                        ref={cancelButtonRef}
+                                                    />
+                                                </div>
+                                                <div className='flex w-full flex-col font-semibold'>
+                                                    <div className='text-foreground w-full'>{modal.body}</div>
+                                                    <div className='w-full'>
+                                                        {modalResponse && (
+                                                            <div className={`w-full p-3`}>{modalResponse.message}</div>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition.Root>
+    )
+    */
+}
+
+export default Modal