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.
59 lines (58 loc) • 2.57 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from "react";
import { useTheme } from "../../theme/ThemeProvider";
const Snackbar = ({ open, message, duration = 3000, onClose, action, styles = {}, className = "", position = "bottom", cornerRadius, backgroundColor, borderColor, shadowColor, boxShadow, padding, margin, fontFamily, textColor, transitionDuration, }) => {
const theme = useTheme();
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.spacingfactor * 2}px ${theme.spacingfactor * 4}px`;
const marg = margin !== undefined ? margin : theme.margin;
const fontFam = fontFamily || theme.fontFamily;
const txtColor = textColor || theme.textColor;
const transition = transitionDuration || theme.transitionDuration;
useEffect(() => {
if (open && duration > 0) {
const timer = setTimeout(onClose, duration);
return () => clearTimeout(timer);
}
}, [open, duration, onClose]);
if (!open)
return null;
return (_jsxs("div", { className: className, style: {
position: "fixed",
left: "50%",
[position]: 32,
transform: "translateX(-50%)",
background: bg,
color: txtColor,
border: `1px solid ${borderCol}`,
borderRadius: radius,
boxShadow: boxSh,
padding: pad,
margin: marg,
fontFamily: fontFam,
fontSize: theme.fontSize * 0.95,
minWidth: 180,
maxWidth: 400,
display: "flex",
alignItems: "center",
gap: 16,
zIndex: 1200,
transition: transition,
...styles,
}, role: "status", "aria-live": "polite", children: [_jsx("span", { style: { flex: 1 }, children: message }), action, _jsx("button", { onClick: onClose, style: {
background: "transparent",
border: "none",
color: txtColor,
fontSize: 18,
cursor: "pointer",
marginLeft: 8,
}, "aria-label": "Close", children: "\u00D7" })] }));
};
export default Snackbar;