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.
107 lines (106 loc) • 6.04 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { useTheme } from "../../theme/ThemeProvider";
const Alert = ({ message = "This is a simple popup alert box.", title = "Alert", buttonText = "Show Alert", styles = {}, className = "", cornerRadius, primaryColor, secondaryColor, textColor, backgroundColor, fontSize, fontFamily, spacingfactor, borderColor, shadowColor, borderWidth, borderStyle, fontWeight, lineHeight, letterSpacing, transitionDuration, padding, margin, shadowOffsetX, shadowOffsetY, shadowBlur, shadowSpread, shadowInset, hoverColor, }) => {
const theme = useTheme();
const [isOpen, setIsOpen] = useState(false);
const [isActive, setIsActive] = useState(false);
// Use prop override, then theme, then fallback to default
const getThemeValue = (prop, themeKey) => prop !== undefined ? prop : theme[themeKey];
const resolvedCornerRadius = getThemeValue(cornerRadius, "cornerRadius");
const resolvedPrimaryColor = getThemeValue(primaryColor, "primaryColor");
const resolvedSecondaryColor = getThemeValue(secondaryColor, "secondaryColor");
const resolvedTextColor = getThemeValue(textColor, "textColor");
const resolvedBackgroundColor = getThemeValue(backgroundColor, "backgroundColor");
const resolvedFontSize = getThemeValue(fontSize, "fontSize");
const resolvedFontFamily = getThemeValue(fontFamily, "fontFamily");
const resolvedSpacingfactor = getThemeValue(spacingfactor, "spacingfactor");
const resolvedBorderColor = getThemeValue(borderColor, "borderColor");
const resolvedShadowColor = getThemeValue(shadowColor, "shadowColor");
const resolvedBorderWidth = getThemeValue(borderWidth, "borderWidth");
const resolvedBorderStyle = getThemeValue(borderStyle, "borderStyle");
const resolvedFontWeight = getThemeValue(fontWeight, "fontWeight");
const resolvedLineHeight = getThemeValue(lineHeight, "lineHeight");
const resolvedLetterSpacing = getThemeValue(letterSpacing, "letterSpacing");
const resolvedTransitionDuration = getThemeValue(transitionDuration, "transitionDuration");
const resolvedPadding = getThemeValue(padding, "padding");
const resolvedMargin = getThemeValue(margin, "margin");
const resolvedShadowOffsetX = getThemeValue(shadowOffsetX, "shadowOffsetX");
const resolvedShadowOffsetY = getThemeValue(shadowOffsetY, "shadowOffsetY");
const resolvedShadowBlur = getThemeValue(shadowBlur, "shadowBlur");
const resolvedShadowSpread = getThemeValue(shadowSpread, "shadowSpread");
const resolvedShadowInset = getThemeValue(shadowInset, "shadowInset");
const resolvedHoverColor = getThemeValue(hoverColor, "hoverColor");
const alertButtonStyles = {
padding: resolvedPadding ||
`${resolvedSpacingfactor * 2}px ${resolvedSpacingfactor * 4}px`,
fontSize: resolvedFontSize,
backgroundColor: resolvedPrimaryColor,
color: resolvedTextColor,
border: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
borderRadius: resolvedSpacingfactor,
cursor: "pointer",
fontFamily: resolvedFontFamily,
fontWeight: 600,
boxShadow: isActive
? `1px 1px 0px ${resolvedShadowColor}`
: `2px 2px 0px ${resolvedShadowColor}`,
transition: `background-color ${resolvedTransitionDuration}, box-shadow 0.2s`,
margin: resolvedMargin || `${resolvedSpacingfactor * 2}px 0`,
};
const popupStyles = {
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,
};
const popupContentStyles = {
fontFamily: resolvedFontFamily,
backgroundColor: resolvedBackgroundColor,
padding: resolvedPadding || `${resolvedSpacingfactor * 5}px`,
border: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
textAlign: "center",
width: 300,
borderRadius: resolvedCornerRadius,
boxShadow: `2px 2px 0px ${resolvedShadowColor}`,
color: resolvedTextColor,
fontSize: resolvedFontSize,
fontWeight: resolvedFontWeight,
lineHeight: resolvedLineHeight,
letterSpacing: resolvedLetterSpacing,
margin: resolvedMargin,
transition: resolvedTransitionDuration,
...styles,
};
const closeButtonStyles = {
marginTop: resolvedPadding || `${resolvedSpacingfactor * 2}px`,
padding: resolvedPadding ||
`${resolvedSpacingfactor * 2}px ${resolvedSpacingfactor * 4}px`,
backgroundColor: resolvedSecondaryColor,
color: resolvedTextColor,
border: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
borderRadius: resolvedSpacingfactor,
cursor: "pointer",
fontFamily: resolvedFontFamily,
fontWeight: 600,
boxShadow: `1px 1px 0px ${resolvedShadowColor}`,
transition: `background-color ${resolvedTransitionDuration}, box-shadow 0.2s`,
};
const handleOpen = () => setIsOpen(true);
const handleClose = () => setIsOpen(false);
const handleMouseDown = () => setIsActive(true);
const handleMouseUp = () => setIsActive(false);
return (_jsxs("div", { className: className, style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
}, children: [_jsx("button", { style: alertButtonStyles, onClick: handleOpen, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, children: buttonText }), isOpen && (_jsx("div", { style: popupStyles, children: _jsxs("div", { style: popupContentStyles, children: [_jsx("h2", { children: title }), _jsx("p", { children: message }), _jsx("button", { style: closeButtonStyles, onClick: handleClose, children: "Close" })] }) }))] }));
};
export default Alert;