tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
56 lines (55 loc) • 2.58 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTheme } from "../../theme/ThemeProvider";
const Modal = ({ open, onClose, title, children, styles = {}, className = "", showCloseButton = true, cornerRadius, backgroundColor, borderColor, shadowColor, boxShadow, padding, margin, fontFamily, textColor, transitionDuration, }) => {
const theme = useTheme();
if (!open)
return null;
const radius = cornerRadius !== undefined ? cornerRadius : theme.cornerRadius;
const bg = backgroundColor || theme.backgroundColor;
const borderCol = borderColor || theme.borderColor;
const shadowCol = shadowColor || theme.shadowColor;
const boxSh = boxShadow || `2px 2px 0px ${shadowCol}`;
const pad = padding !== undefined ? padding : theme.padding || theme.spacingfactor * 5;
const marg = margin !== undefined ? margin : theme.margin;
const fontFam = fontFamily || theme.fontFamily;
const txtColor = textColor || theme.textColor;
const transition = transitionDuration || theme.transitionDuration;
return (_jsx("div", { style: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0,0,0,0.5)",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: 1000,
transition: transition,
}, children: _jsxs("div", { className: className, style: {
background: bg,
border: `2px solid ${borderCol}`,
borderRadius: radius,
boxShadow: boxSh,
minWidth: 320,
maxWidth: 480,
padding: pad,
margin: marg,
fontFamily: fontFam,
color: txtColor,
position: "relative",
transition: transition,
...styles,
}, children: [showCloseButton && (_jsx("button", { onClick: onClose, style: {
position: "absolute",
top: 24,
right: 32,
background: "transparent",
border: "none",
fontSize: 24,
cursor: "pointer",
color: txtColor,
}, "aria-label": "Close", children: "\u00D7" })), title && _jsx("h2", { style: { marginTop: 0 }, children: title }), _jsx("div", { children: children })] }) }));
};
export default Modal;