byokay-kit
Version:
Byokay Kit lets users bring their own AI API keys and store them securely in their browser. This eliminates the need for your app to manage sensitive credentials or maintain AI API backend infrastructure.
21 lines (20 loc) • 2.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// src/ui/components/Modal.tsx
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
export function Modal({ isOpen, onClose, title, subtitle, children, footer, }) {
const [target, setTarget] = useState(null);
useEffect(() => {
if (!isOpen)
return;
const el = document.createElement("div");
document.body.appendChild(el);
setTarget(el);
return () => {
document.body.removeChild(el);
};
}, [isOpen]);
if (!isOpen || !target)
return null;
return createPortal(_jsx("div", { className: "\n fixed inset-0 z-50 bg-black/50\n flex justify-center md:items-center\n items-start pt-10\n animate-fade-in\n ", onClick: onClose, children: _jsxs("div", { className: "\n bg-white shadow-lg border border-gray-200 transition-all\n w-full h-full grow max-w-none rounded-none\n md:h-auto md:grow-0 md:max-w-md md:rounded-xl\n overflow-hidden flex flex-col\n ", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "bg-blue-50 px-4 py-3 flex justify-between border-b border-gray-200", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium text-gray-800", children: title }), subtitle && (_jsx("p", { className: "text-xs text-gray-600 mt-1 max-w-sm", children: subtitle }))] }), _jsx("button", { onClick: onClose, "aria-label": "Close", className: "text-gray-500 hover:text-gray-700 rounded-full p-1 hover:bg-gray-100 transition-colors flex-shrink-0", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), _jsx("div", { className: "p-4 flex-grow overflow-y-auto", children: children }), footer && (_jsx("div", { className: "px-4 py-3 border-t border-gray-100", children: footer }))] }) }), target);
}