chore: import codes

2026-04-12 12:50:14 -04:00
parent 4bcb4898e8
commit 65ae3c6788
241 changed files with 48834 additions and 1 deletions
@@ -0,0 +1,79 @@
+import React from 'react';
+import { Dialog } from '@headlessui/react';
+import { Cancel01Icon } from '../Icons';
+import Button from './Button';
+
+const Modal = ({
+    isOpen = true,
+    onClose,
+    title,
+    children,
+    footer,
+    size = 'lg',
+    closable = true
+}) => {
+    const sizeClasses = {
+        sm: 'max-w-md',
+        md: 'max-w-lg',
+        lg: 'max-w-2xl',
+        xl: 'max-w-4xl',
+        full: 'max-w-7xl'
+    };
+
+    return (
+        <Dialog 
+            open={isOpen} 
+            onClose={closable ? onClose : () => {}}
+            className="relative z-50"
+        >
+            {/* Backdrop */}
+            <div className="fixed inset-0 bg-black/40" aria-hidden="true" />
+
+            {/* Container */}
+            <div className="fixed inset-0 flex items-center justify-center p-4">
+                <Dialog.Panel 
+                    className={`
+                        w-full ${sizeClasses[size]} 
+                        bg-white dark:bg-neutral-900
+                        border border-neutral-200 dark:border-neutral-800
+                        rounded-xl 
+                        shadow-xl 
+                        max-h-[90vh] 
+                        overflow-hidden
+                        flex flex-col
+                    `}
+                >
+                    {/* Header */}
+                    <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
+                        <Dialog.Title className="text-sm font-medium text-neutral-900 dark:text-white">
+                            {title}
+                        </Dialog.Title>
+                        {closable && (
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={onClose}
+                                icon={<Cancel01Icon className="w-4 h-4" />}
+                                className="!p-1 -mr-1"
+                            />
+                        )}
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex-1 overflow-y-auto p-4">
+                        {children}
+                    </div>
+
+                    {/* Footer */}
+                    {footer && (
+                        <div className="px-4 py-3 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/30">
+                            {footer}
+                        </div>
+                    )}
+                </Dialog.Panel>
+            </div>
+        </Dialog>
+    );
+};
+
+export default Modal;