c649f055d8
- Added main application entry point (app.jsx) and bootstrap file for React setup. - Created Wiki index page (Index.jsx) for documentation and file management. - Implemented utility functions for formatting and status handling in utils.js. - Set up Blade template (app.blade.php) for Inertia.js integration. - Defined API routes for metrics and terminal access in api.php. - Established console commands for scheduled tasks in console.php. - Created web routes for various application features including authentication, hypervisors, containers, cloud accounts, security, backups, and wiki management in web.php. - Developed setup scripts for Windows (setup.ps1) and Linux (setup.sh) environments. - Configured Tailwind CSS for styling with custom themes and animations in tailwind.config.js. - Set up Vite for asset bundling and development server in vite.config.js.
55 lines
2.6 KiB
JavaScript
55 lines
2.6 KiB
JavaScript
import { Fragment } from 'react';
|
|
import { Dialog, Transition } from '@headlessui/react';
|
|
import { X } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function Modal({ isOpen, onClose, title, children, size = 'md', className }) {
|
|
const sizes = {
|
|
sm: 'max-w-md',
|
|
md: 'max-w-2xl',
|
|
lg: 'max-w-4xl',
|
|
xl: 'max-w-6xl',
|
|
full: 'max-w-[95vw]',
|
|
};
|
|
|
|
return (
|
|
<Transition appear show={isOpen} as={Fragment}>
|
|
<Dialog as="div" className="relative z-50" onClose={onClose}>
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-200" enterFrom="opacity-0" enterTo="opacity-100"
|
|
leave="ease-in duration-150" leaveFrom="opacity-100" leaveTo="opacity-0"
|
|
>
|
|
<div className="fixed inset-0 bg-black/70 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-200" enterFrom="opacity-0 scale-95" enterTo="opacity-100 scale-100"
|
|
leave="ease-in duration-150" leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95"
|
|
>
|
|
<Dialog.Panel className={cn(
|
|
'w-full rounded-2xl border border-white/10 bg-[#0a1628] shadow-2xl',
|
|
sizes[size],
|
|
className
|
|
)}>
|
|
{title && (
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
|
|
<Dialog.Title className="text-base font-semibold text-white">{title}</Dialog.Title>
|
|
<button onClick={onClose} className="p-1 rounded-lg hover:bg-white/10 text-white/50 hover:text-white transition-colors">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
<div className="p-6">{children}</div>
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
);
|
|
}
|