Prepara versao dev 1.0

front-end-dash.aggios.app/components/ui/Dialog.tsx

@@ -0,0 +1,95 @@
+import { Fragment } from 'react';
+import { Dialog as HeadlessDialog, Transition } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+interface DialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    showClose?: boolean;
+}
+
+const sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+};
+
+export default function Dialog({
+    isOpen,
+    onClose,
+    title,
+    children,
+    size = 'md',
+    showClose = true,
+}: DialogProps) {
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <HeadlessDialog as="div" className="relative z-50" onClose={onClose}>
+                <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-black/50 backdrop-blur-sm" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <HeadlessDialog.Panel
+                                className={`w-full ${sizeClasses[size]} transform rounded-2xl bg-white dark:bg-gray-800 p-6 text-left align-middle shadow-xl transition-all border border-gray-200 dark:border-gray-700`}
+                            >
+                                {title && (
+                                    <div className="flex items-center justify-between mb-4">
+                                        <HeadlessDialog.Title
+                                            as="h3"
+                                            className="text-lg font-semibold text-gray-900 dark:text-white"
+                                        >
+                                            {title}
+                                        </HeadlessDialog.Title>
+                                        {showClose && (
+                                            <button
+                                                onClick={onClose}
+                                                className="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                                            >
+                                                <XMarkIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                                            </button>
+                                        )}
+                                    </div>
+                                )}
+
+                                {children}
+                            </HeadlessDialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </HeadlessDialog>
+        </Transition>
+    );
+}
+
+// Componente auxiliar para o corpo do dialog
+Dialog.Body = function DialogBody({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+    return <div className={`text-sm text-gray-600 dark:text-gray-300 ${className}`}>{children}</div>;
+};
+
+// Componente auxiliar para o rodapé do dialog
+Dialog.Footer = function DialogFooter({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+    return <div className={`mt-6 flex items-center justify-end space-x-3 ${className}`}>{children}</div>;
+};